zoukankan      html  css  js  c++  java
  • vue 父子组件传值数据不能实时更新问题

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

     }

    但行好事,莫问前程。
  • 相关阅读:
    济南学习 Day5 T3 晚
    Codevs 1043 ==洛谷 P1004 方格取数
    济南学习 Day 5 T2 晚
    济南学习 Day 5 T1 晚
    济南学习 Day 5 T3 am
    济南学习 Day 5 T2 am
    LeetCode Weekly Contest 8
    poj-1410 Intersection
    leetcode-Warm Up Contest-Aug.21
    poj-1384 Piggy-Bank
  • 原文地址:https://www.cnblogs.com/txhy/p/11483623.html
Copyright © 2011-2022 走看看