vue中。子組件向父組件傳遞數據

子組件向父組件傳遞數據使用$emit方法，demo

父組件

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

原文連接：https://blog.csdn.net/joyvonlee/article/details/90545808

子組件

<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)
        }
    }
}


原文連接：https://blog.csdn.net/joyvonlee/article/details/90545808

一、在子組件中，首先須要使用$emit方法，該方法接收2個參數，第一個參數是事件的名稱，本身隨意定義。第二個參數是須要傳遞的數據，能夠是對象，也能夠是字符串類型。$emit是VUE實例中的一個方法，因此前面要加上this，能夠在鉤子函數中執行，也能夠由某個事件觸發執行。

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

原文連接：https://blog.csdn.net/joyvonlee/article/details/90545808