Vue1:子组件的数据,如何随着父组件数据的改变而变化?

我的想法是:
子组件的数据“cMsg”的值,取决于父组件data中的“laoba”属性;
父组件的“pMsg”的数据,是通过根实例“root”来决定的。

出现的问题是:
子组件的数据“cMsg”,不能随着父组件的“pMsg”的改变而变化。

麻烦帮我看看代码哪出了问题,我碰到拦路虎了,多谢!

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>hello-world</title>
<style>
*{margin: 0; padding: 0;}
#demo{ 
    height: 50px;
    background: lime;
}
</style>
<!-- 我用的是Vue 1.0.26   -->
<script src="../vue.js"></script>
</head>
<body>
        <!--V-->
    <div  id="demo">
        <pp :p-msg="root"></pp>
    </div>
<script>
'use strict';
    // 子组件构造器
    var child = Vue.extend({ 
        props : ['cMsg'],
        template : '<b>从父组件接收到的数据是:{{cMsg}}</b>'
    });
    // 父组件构造器
    var parent = Vue.extend({ 
        props : ['pMsg'],
        template : '<p>{{pMsg}}-<cc :c-msg="laoba"></cc></p>',
        components : { 
            'cc' : child
        },        
        data : function(){ 
            /* 
            给vm.root赋值时 在控制台中可以看到新的值 
            var _this = this;
            setInterval(function(){ 
                console.log(_this.pMsg)
            },1000);
            */
            return { 
                laoba : this.pMsg
            }
        }

    });

    // 将构造器注册为组件
    Vue.component('pp',parent);

    // 生成实例
    var vm = new Vue({ 
        el : '#demo',
        data : { 
            root :'根实例数据'
        }
    });


</script>
</body>
</html>
阅读 4.4k
3 个回答

oh,my,god, 还有用1.x 版本。

你应该改laoba这个变量。而不是pMsg这个属性吧。

:c-msg="laoba"
//改成

:c-msg="pMsg"

你这样仅仅在初始化时给laoba赋值了,因此Props改变时不会跟着改变
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题