Vue3 學習筆記05-子組件向父組件，使用$emit方法

子組件的代碼：

<template>
    <div>
        <h1>this is child component</h1>
        <button @click="toParent">向父組件傳值</button>
    </div>
</template>
 
 
<script>
export default {
    data() {
        return {
            data1: '子組件的數據'
        }
    },
    methods: {
        toParent:function() {
            this.$emit('event1', this.data1)
        }
    }
}
</script>
 
<style scoped>
    div {
        border: 1px solid red;
    }
</style>

父組件的代碼：

<template>
    <div>
        {{ newData }}
        <child @event1="change($event)"></child>
        
    </div>
</template>
 
 
<script>
import child from './components/Child.vue';
export default {
    data() {
        return {
            newData: '這是父組件的數據'
        }
    },
    methods: {
        change(data) {
            this.newData = data;
        }
    },
    components: {child}
}
</script>
 
<style>
 
</style>

效果圖：

代碼解釋：
1、在子組件中，首先需要使用$emit方法，該方法接收2個參數，第一個參數是事件的名稱，自己隨意定義。第二個參數是需要傳遞的數據，可以是對象，也可以是字符串類型。$emit是VUE實例中的一個方法，所以前面要加上this，可以在鈎子函數中執行，也可以由某個事件觸發執行。

2、在父組件中，程序會查找剛才在子組件中注冊的事件名，該事件又有一個方法change，change方法將newData的值改變了。

參考文獻：https://blog.csdn.net/joyvonlee/article/details/90545808