我的想法是:
子组件的数据“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>
oh,my,god, 还有用1.x 版本。