所謂的子組件向父組件傳值,實際上用的是事件映射,事件映射其實相當於自定義了一個事件 第一個參數是自定義(映射)事件的名稱 第二個參數是要攜帶的參數
在子組件中,首先需要使用$emit方法,該方法接收2個參數,第一個參數是事件的名稱,自己隨意定義。第二個參數是需要傳遞的數據,可以是對象,也可以是字符串類型。$emit是VUE實例中的一個方法,所以前面要加上this,可以在鉤子函數中執行,也可以由某個事件觸發執行。
子組件:
<template>
<!-- 這是子組件 -->
<div>
<button @click="fun">點擊</button>
</div>
</template>
<script>
export default {
data(){
return{
title:'已經把子組件的值傳給父組件了'
}
},
methods: {
fun(){
this.$emit('change',this.title)
}
}
}
</script>
父組件:
<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)