vue 父子元件通訊,利用物件進行通訊
阿新 • • 發佈:2019-02-08
大家都知道vue父子元件間通訊用到了props,$emit。
通過props可以實現父向子通訊,通過$emit可以實現子向父通訊,現在我要介紹另外一種方式,通過props傳物件的形式通訊。
首先寫一個簡單的例子
//父元件
<parent>
<input type="text" v-model="parent.name" />
<myChild :child="parent"></myChild>
</parent>
export default {
data(){
return{
parent :{
name:'父級名稱',
}
}
}
}
//子元件
<children>
<input type="text" v-model="child.name" />
</children>
export default {
props:['child']
}
這樣就通過props完成了簡單的父向子的傳遞,但是我傳的是一個物件,你可以試下,在子級裡修改input父級居然也跟著變了,居然沒用emit也完成了子向父的通訊。
這樣物件的形式不光是可以傳遞簡單的值,還可以呼叫父級的方法,比如:
//父元件
<parent>
<input type="text" v-model="parent.name" />
<myChild :child="parent"></myChild>
</parent>
export default {
data(){
return{
parent:{
alert:function(txt){
alert(txt)
}
}
}
}
}
//子元件
<children>
<button @click="child.alert('我是子級')">提交</button>
</children>
export default {
props:['child']
}
直接在父級物件裡寫一個方法,子級居然直接就可以呼叫了