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。

【4】驼峰写法

假如插值是驼峰式的，

而在html标签中，由于html的特性是不区分大小写（比如LI和li是一样的），因此，html标签中要传递的值要写成短横线式的（如btn-test），以区分大小写。

而在props的数组中，应该和插值保持一致，写成驼峰式的（如btnTest）。

例如：

props: ['btnTest'], template: "<button>btn：{{btnTest}}</button>", 

正确的写法：

<add btn-test="h"></add> 

假如插值写短横线式，或者是html标签写成驼峰式，都不能正常生效。（除非插值不写成驼峰式——跳过大小写的限制，才可以）

③利用props绑定动态数据：

简单来说，就是让子组件的某个插值，和父组件的数据保持一致。

标准写法是（利用v-bind）：

<add v-bind:子组件的值="父组件的属性"></add> 

如代码

<div id="app"> <add v-bind: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>