Vue 父子組件傳值 之 子組件向父組件傳值

所謂的子組件向父組件傳值，實際上用的是事件映射，事件映射其實至關於自定義了一個事件 第一個參數是自定義(映射)事件的名稱 第二個參數是要攜帶的參數javascript

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

子組件：函數

<template>
<!-- 這是子組件 -->
    <div>
        <button @click="fun">點擊</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            title:'已經把子組件的值傳給父組件了'
        }
    },
    methods: {
        fun(){
            this.$emit('change',this.title)
        }
    }
}
</script>

父組件：this

<template>
<!-- 這是父組件 -->
    <div>
        {{tit}}
        <!-- 事件映射在那個組件中定義就在當前組件定義的元素上監聽該事件的觸發 
            this.$emit('change',this.title)
                子組件定義的什麼事件名稱，這裏就寫什麼  用來監聽變化
        -->
        <childr @change="changeTitle"></childr>  
    </div>
</template>
<script>
import childr from '@/components/childr' //把子組件引入
export default {
    data(){
        return{
            tit:"演示子組件向父組件傳值"
        }
    },
    components: {
        childr  //註冊子組件
    },
    methods: {
        changeTitle(data){  //這裏的data用來接受子組件傳遞過來的參數（就是子組件中this.title）
            this.tit = data
        }
    }
}
</script>

效果：（經過$emit(),將子組件中的title傳給父組件中的tit）spa