vue父子組件通信實現筆記

父組件向子組件傳遞內容

父組件發送：

模板正常綁定方式傳值即可

<yixzm :flag="dream"></yixzm>

子組件接收：

props接收後可直接使用，參考watch函數，method內使用同樣是 this.flag

props: {
	flag: String
},
watch: {
	flag() {
		console.log(this.flag)
	}
},

子組件向父組件傳遞內容

子組件發送：

this.$emit('rander', true)

父組件接收：

<yixzm v-if="flagRander" @rander="rander"></yixzm>

rander() {
    this.flagRander = false
    this.$nextTick(function () {
    	this.flagRander = true
    })
},

子組件中的true在本例中無用，如需使用，寫法如下：

rander(data) {
	...
}

官網對應文檔章節

Prop

[Prop 驗證]https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81

emit

[vm.$emit]https://cn.vuejs.org/v2/api/#vm-emit

watch

[watch]https://cn.vuejs.org/v2/api/#watch