忘了什么时候了,遇到过这么一个坑:父子组件传值,(子组件为动态创建)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;
}
原文:https://www.cnblogs.com/txhy/p/11483623.html