Vue2組件間通信—子傳父值自定義事件
Vue2中組件間通信系列，本篇是關于子組件向父組件傳值的介紹，這里我會用通俗的語言幫助大家理解自定義事件
功能：
父組件可以接受到子組件傳遞的資料，適用于組件間通信，
原理：
子組件要給父組件傳遞資料，此時要在父組件中給子組件系結一個自定義事件，回呼寫在父組件中，那么觸發這個自定義事件的就是子組件，傳遞的引數就是子組件要給父組件傳遞的資料，
系結自定義事件的兩種方式：
-
第一種方式：
父組件：
<template>
<div>
<Son @show="showName" />
</div>
</template>
<script>
import Son from './Son.vue'
export default {
name:'Father',
data(){
return{
}
},
methods:{
showName(name){
console.log(name)
}
},
components:{
Son
}
}
子組件：
export default {
name:'Son',
mounted(){
this.$emit('show',"Son子組件")
}
}
</script>
控制臺結果：
Son子組件
-
第二種方式：
父組件：
<template>
<div>
<Son ref="MySon"/>
</div>
</template>
<script>
import Son from './Son.vue'
export default {
name:'Father',
methods:{
ShowName(name){
console.log(name)
}
},
mounted(){
this.$refs.MySon.$on('show',this.ShowName)
},
components:{
Son
}
}
</script>
子組件：
<template>
<button @click="toFather">為Father傳值</button>
</template>
<script>
export default {
name:'Son',
methods:{
toFather(){
this.$emit('show',"Son子組件")
}
},
}
</script>
控制臺結果：
Son子組件
區別(小坑)：
兩種方式的目的都是為了子傳父值，不過在這里需要注意的是第二種方式在為子組件系結自定義事件的時機與第一種方式不同，第二種是在整個頁面掛載之后對子組件系結自定義事件，而Vue的執行機制是子組件比父組件先進行渲染，也就是說子組件都已經渲染完畢了之后我們才給它系結自定義事件，所以子組件中觸發自定義事件的函式不可以在mounted鉤子中執行，通俗點說就是子組件比父組件先進行渲染，子組件的mounted函式比父組件的先執行，在執行的時候父組件的自定義事件還沒有系結(查無此人)，所以在示例中對于第二種方式我們在子組件中用按鈕去觸發自定義事件，
補充：
- 我們最好在組件銷毀之前對自定義事件進行解綁，this.$off (‘自定義事件’), 這一程序可以在beforeDestroy鉤子中執行
- 對于系結原生DOM事件也可以用native修飾符修飾 如： @click.native="…" 這樣click事件就變成了原生Dom事件不會被當做自定義事件執行，
- 注意點：對于第二種方式系結自定義事件的回呼函式要么寫成命名函式的方式到methods中，要么寫成箭頭函式的形式，否則this指向不是組件實體，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/297316.html
標籤：其他