Vuejs 组件组件——props数据传递的实例代码数据传递的实例代码
本篇资料来于官方文档：http://cn.vuejs.org/guide/components.html#Props
本文是在官方文档的基础上，更加细致的说明，代码更多更全。
简单来说，更适合新手阅读
props数据传递数据传递
①组件实例的作用域：组件实例的作用域：
是孤立的，简单的来说，组件和组件之间，即使有同名属性，值也不共享。
<div id="app">
<add></add>
<del></del>
</div>
<script>
var vm = new Vue({
el: '#app',
components: {
"add": {
template: "<button>btn：{{btn}}</button>",
data: function () {
return {btn: "123"};
}
},
del: {
template: "<button>btn：{{btn}}</button>",
data: function () {
return {btn: "456"};
}
}
}
});
</script>
渲染结果是：
2个按钮，第一个的值是123，第二个的值是456（虽然他们都是btn）
②使用使用props绑定静态数据：绑定静态数据：
【1】这种方法用于传递字符串，且值是写在父组件自定义元素上的。
【2】下面示例中的写法，不能传递父组件data属性中的值
【3】会覆盖模板的data属性中，同名的值。
示例代码：
<div id="app">
<add btn="h"></add>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
h: "hello"
},
components: {
"add": {
props: ['btn'],
template: "<button>btn：{{btn}}</button>",
data: function () {
return {btn: "123"};
}
}
}
});
</script>
这种写法下，btn的值是h，而不是123，或者是hello。
资源评论
