<template>
    <div :style="{ fontSize: postFontSize + 'em' }">
        <BlogPost 
            v-for="post in posts" 
            :key="post.id" 
            :title="post.title"
            @enlarge-text="postFontSize += 0.1"/>
    </div>
</template>
<script >
import BlogPost from './BlogPost.vue'
export default {
    name: 'Blog',
    components: {
        BlogPost
    },
    data() {
        return {
            posts: [
                { id: 1, title: 'My journey with Vue' },
                { id: 2, title: 'Blogging with Vue' },
                { id: 3, title: 'Why Vue is so fun' }
            ],
            postFontSize: 1
        }
    }
}
</script>
<style lang="scss"></style>

<template>
    <div class="blog-post">
        <h4>{{ title }}</h4>
        <button @click="$emit('enlarge-text')">Enlarge text</button>
    </div>
</template>
<script>
export default {
    name: 'BlogPost',
    props: ['title'],
    // 這個emits聲明選項不是必須的
    emits: ['enlarge-text']
}
</script>
<style lang="scss"></style>

<templte>
	<button @click="$emit('someEvent')">click me</button>
</template>
<script>
	export default {
	  methods: {
	    submit() {
	      this.$emit('someEvent')
	    }
	  }
	}
</script>

<MyComponent @some-event="callback" />
<MyComponent @some-event.once="callback" />

<template>
    {{ count }}
    <BlogPost @increase-by="(n) => count += n" />
    <BlogPost @increase-by="increaseCount" />
</template>
<script >
import BlogPost from './BlogPost.vue'
export default {
    name: 'Blog',
    components: {
        BlogPost
    },
    data() {
        return {
            count: 0
        }
    },
    methods: {
        increaseCount(n,m,e) {
            console.log(n,m,e); // 1, 2, PointerEvent {isTrusted: true, _vts: 1682821628803, pointerId: 1, width: 1, height: 1, …}
            this.count += n
        }
    }
}
</script>
<style lang="scss"></style>

<template>
    <div class="blog-post">
        <button @click="$emit('increaseBy', 1, 2, $event)">
            Increase by 1
        </button>
    </div>
</template>
<script>
export default {
    name: 'BlogPost',
}
</script>
<style lang="scss"></style>

<template>
    <!-- 在組件的模板表達(dá)式中，可以直接使用 $emit 方法觸發(fā)自定義事件 -->
    <!-- 可以通過 v-on (縮寫為 @) 來監(jiān)聽事件, 即：@click -->
    <!-- 這里可以使用駝峰命名形式觸發(fā)的事件名稱, 而在父組件中使用短橫線命名形式監(jiān)聽 -->
    <!-- 傳入3個參數(shù), 則在父組件中監(jiān)聽函數(shù)中, 也應(yīng)至少有3個參數(shù), 
         否則按參數(shù)個數(shù)賦值，也可以在這里傳個對象過去,就只需要一個參數(shù)了,
         并且可以使用$event, 將當(dāng)前事件傳過去 -->
    <!-- 參數(shù)也可以使用模板中拿到的參數(shù), 比如v-for循環(huán)里拿到的每一項數(shù)據(jù) -->
    <button v-on:click="$emit('doUpdate',$event,1,2)">觸發(fā)doUpdate事件</button> <br/>
    <button v-on:click="$emit('refresh', {name:'zzhua',age:Math.floor(Math.random() * 20)})">觸發(fā)refresh事件</button>
    子組件中person: {{ person }}<br/>
    <!-- 可以使用事件修飾符, once表示該事件只會觸發(fā)1次 -->
    <button v-on:click.once="handleClick()">觸發(fā)click事件</button>
</template>
<script lang="ts" setup>
    import { ref,reactive,onUpdated } from 'vue'
    /* 1. defineEmits() 宏不能在子函數(shù)中使用。它必須直接放置在 <script setup> 的頂級作用域下 */
    /* 2. 顯式地使用了 setup 函數(shù)而不是 <script setup>，則事件需要通過 emits 選項來定義，emit 函數(shù)也被暴露在 setup() 的上下文對象上 */
    const emit = defineEmits(['doUpdate']) /* 可以不需要定義doUpdate, 但建議定義doUpdate, 以此來聲明此組件可以被觸發(fā)的事件 */
     function handleClick () {
        console.log('click');
        emit('doUpdate',e,3,4) /* 使用emit，手動觸發(fā)doUpdate事件 */
    }
    const props = defineProps(['person'])
    onUpdated(()=>{
        console.log('---組件渲染更新了---') /* 當(dāng)通過觸發(fā)子組件事件, 父組件監(jiān)聽到該組件的該事件, 修改了person的ref值, 從而組件會更新 */
    })
</script>
<style lang="scss">
    button {
        margin: 5px;
    }
</style>

<template>
    <!-- 可以使用短橫線形式監(jiān)聽當(dāng)前這個組件的事件，并指定事件處理函數(shù) -->
    <my-component :person="person" v-on:do-update="handleUpdate" @refresh="handleRefresh" ></my-component><br/>
    父組件中person: {{ person }}
</template>
<script lang="ts" setup>
    import { ref,reactive,computed } from 'vue'
    import MyComponent from './MyComponent.vue';
    const person = ref({ name: 'demoName', age: NaN})
    function handleUpdate(event,payload1,payload2) {
        console.log(event); // PointerEvent {isTrusted: true, _vts: 1678062697219, pointerId: 1, width: 1, height: 1, …}
        console.log(payload1, payload2);
    }
    function handleRefresh( p) {
        console.log(p); // {name: 'zzhua', age: 18}
        person.value = p
    }
</script>
<style lang="scss">
</style>

<template>
    {{ count }}
    <BlogPost @submit="handleSubmit" />
</template>
<script >
import BlogPost from './BlogPost.vue'
export default {
    name: 'Blog',
    components: {
        BlogPost
    },
    data() {
        return {
            count: 0
        }
    },
    handleSubmit(payload) {
        console.log(payload);
    }
}
</script>
<style lang="scss"></style>

<template>
    <div class="blog-post">
        <button @click="$emit('submit', {password:'123456'})">
            submit
        </button>
    </div>
</template>
<script>
export default {
    name: 'BlogPost',
    emits: {
        // 沒有校驗
        click: null,
        // 校驗 submit 事件
        submit: ({ email, password }) => {
            if (email && password) {
                return true
            } else {
                console.warn('Invalid submit event payload!')
                return false
            }
        }
    },
    methods: {
        submitForm(email, password) {
            this.$emit('submit', { email, password })
        }
    }
}
</script>
<style lang="scss"></style>

<template>
    <button @click="submitForm(123,456)">觸發(fā)submitForm事件</button>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
const emit = defineEmits({
    // 沒有校驗
    click: null,
    // 校驗 submit 事件
    submit: ({ email, password }) => {
        if (email && password) {
            console.log(email, password);
            return true
        } else {
            console.warn('Invalid submit event payload!')
            return false
        }
    }
})
function submitForm(email, password) {
    emit('submit', { email, password })
}
</script>
<style lang="scss">
button {
    margin: 5px;
}
</style>

<template>
    <MyComponent></MyComponent>
</template>
<script lang="ts" setup>
    import { ref,reactive,computed } from 'vue'
    import MyComponent from './MyComponent.vue';
</script>
<style lang="scss">
</style>