忘了什么時候了,遇到過這么一個坑:父子組件傳值,(子組件為動態創建)v-model好像沒有做到數據同步更新,這就頭大了。。業務需要嘛,可是自己又懶得想為什么,好吧..爬出坑就是硬道理,不要問why,我懶啊。
這里做個小筆記,萬一哪天一樣需要爬出坑的盆友,可以做個借鑒。具體直接上代碼:
vue升級2.0
prop雙向綁定實效解決方案:
父組件
<child :content='content' ></child>
子組件接收:
props:['content'],
data(){
return{
conData:this.content
}
},
watch: {
content: function (val) {
this.conData = val
},
conData: function (val) {
console.log(val)
this.$emit('content', val)
}
}
將子組件要調用的方法,綁定到組件上,比如:
<child @sendChildData=“getChildData”></child>
子組件調用父組件方法:通過“$emit”
例如:
<el-button type="button" @click="testParentFns"></el-button> // testParentFns子組件自己的方法
testParentFns(){
this.$emit("sendChildData",'just test'); //sendChildData 父組件中往子組件傳遞方法標識 getChildData為父組件內定義獲取子組件數據的方法
}
父級接收到事件后,執行getChildData方法獲取數據並回顯。
getChildData(newData){
this.data = newData;
}