首页 > 其他 > 详细

vue 父子组件传值数据不能实时更新问题

时间:2019-09-07 23:27:29      阅读:1440      评论:0      收藏:0      [点我收藏+]

忘了什么时候了,遇到过这么一个坑:父子组件传值,(子组件为动态创建)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;

 }

vue 父子组件传值数据不能实时更新问题

原文:https://www.cnblogs.com/txhy/p/11483623.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!