vue.js 组件二

Vuejs——组件——props数据传递

标签: vuejsprops
 分类:
 

目录(?)[+]

 

 

本篇资料来于官方文档:

http://cn.vuejs.org/guide/components.html#Props

本文是在官方文档的基础上,更加细致的说明,代码更多更全。

简单来说,更适合新手阅读


 

(二十六)props数据传递

①组件实例的作用域:

是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享。

[html] view plain copy
 
  1. <div id="app">  
  2.     <add></add>  
  3.     <del></del>  
  4. </div>  
  5. <script>  
  6.     var vm = new Vue({  
  7.         el: '#app',  
  8.         components: {  
  9.             "add": {  
  10.                 template: "<button>btn:{{btn}}</button>",  
  11.                 data: function () {  
  12.                     return {btn: "123"};  
  13.                 }  
  14.             },  
  15.             del: {  
  16.                 template: "<button>btn:{{btn}}</button>",  
  17.                 data: function () {  
  18.                     return {btn: "456"};  
  19.                 }  
  20.             }  
  21.         }  
  22.     });  
  23. </script>  

渲染结果是:

2个按钮,第一个的值是123,第二个的值是456(虽然他们都是btn)

 

 

②使用props绑定静态数据:

【1】这种方法用于传递字符串,且值是写在父组件自定义元素上的。

【2】下面示例中的写法,不能传递父组件data属性中的值

【3】会覆盖模板的data属性中,同名的值。

示例代码:

[html] view plain copy
 
  1. <div id="app">  
  2.     <add btn="h"></add>  
  3. </div>  
  4. <script>  
  5.     var vm = new Vue({  
  6.         el: '#app',  
  7.         data: {  
  8.             h: "hello"  
  9.         },  
  10.         components: {  
  11.             "add": {  
  12.                 props: ['btn'],  
  13.                 template: "<button>btn:{{btn}}</button>",  
  14.                 data: function () {  
  15.                     return {btn: "123"};  
  16.                 }  
  17.             }  
  18.         }  
  19.     });  
  20. </script>  

这种写法下,btn的值是h,而不是123,或者是hello。

 

【4】驼峰写法

假如插值是驼峰式的,

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

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

 

例如:

[javascript] view plain copy
 
  1. props: ['btnTest'],  
  2. template: "<button>btn:{{btnTest}}</button>",  

 

正确的写法:

[html] view plain copy
 
  1. <add btn-test="h"></add>  

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

 

 

③利用props绑定动态数据:

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

 

标准写法是(利用v-bind):

[html] view plain copy
 
  1. <add v-bind:子组件的值="父组件的属性"></add>  

如代码
[html] view plain copy
 
  1. <div id="app">  
  2.     <add v-bind:btn="h"></add>  
  3. </div>  
  4. <script>  
  5.     var vm = new Vue({  
  6.         el: '#app',  
  7.         data: {  
  8.             h: "hello"  
  9.         },  
  10.         components: {  
  11.             "add": {  
  12.                 props: ['btn'],  
  13.                 template: "<button>btn:{{btn}}</button>",  
  14.                 data: function () {  
  15.                     return {'btn': "123"};  //子组件同名的值被覆盖了  
  16.                 }  
  17.             }  
  18.         }  
  19.     });  
  20. </script>  

说明:

【1】btn使用的父组件data中 h的值;

【2】子组件的data的函数中返回值被覆盖了。

【3】也就是说,使用v-bind的是使用父组件的值(根据属性名),没有使用v-bind的是将标签里的数值当做字符串来使用。

【4】依然需要使用props,否则他会取用自己data里的btn的值

 

 

④字面量和动态语法:

【1】简单来说,不加v-bind的,传递的是字面量,即当做字符串(例如1也是字符串,而不是number类型);

【2】加上v-bind的,传递的是JS表达式(因此才能传递父组件的值);

【3】加上v-bind后,如果能找到父组件的值,那么使用父组件的值;如果没有对应的,则将其看做一个js表达式(例如1+2看做3,{a:1}看做是一个对象);

 

如代码:

[html] view plain copy
 
  1. <div id="app">  
  2.     <add v-bind:btn="1+2"></add>  
  3. </div>  
  4. <script>  
  5.     var vm = new Vue({  
  6.         el: '#app',  
  7.         data: {  
  8.             h: "hello"  
  9.         },  
  10.         components: {  
  11.             "add": {  
  12.                 props: ['btn'],  
  13.                 template: "<button>btn:{{btn}}</button>"  
  14.             }  
  15.         }  
  16.     });  
  17. </script>  

这里的btn的值是3(而不是没有加v-bind时,作为字符串的1+2)



⑤props的绑定类型:

【1】简单来说,分为两种类型,即单向绑定(父组件能影响子组件,但相反不行)和双向绑定(子组件也能影响父组件);

 

【2】单向绑定示例:(默认,或使用.once)

[html] view plain copy
 
  1. <div id="app">  
  2.     父组件:  
  3.     <input v-model="val"><br/>  
  4.     子组件:  
  5.     <test v-bind:test-Val="val"></test>  
  6. </div>  
  7. <script>  
  8.     var vm = new Vue({  
  9.         el: '#app',  
  10.         data: {  
  11.             val: 1  
  12.         },  
  13.         components: {  
  14.             "test": {  
  15.                 props: ['testVal'],  
  16.                 template: "<input v-model='testVal'/>"  
  17.             }  
  18.         }  
  19.     });  
  20. </script>  

说明:

当父组件的值被更改后,子组件的值也随之更改;

当子组件的值被更改后,父组件的值不会变化,而假如再次修改父组件的值,子组件会再次同步。

另外需要注意的是,子组件如果要同步绑定,那么子组件的input需要是v-model,而不能是value属性(那样只能单项绑定,且修改子组件的值后会失去绑定)

 

【3】双向绑定:

需要使用“.sync”作为修饰词

如示例:

[html] view plain copy
 
  1. <div id="app">  
  2.     父组件:  
  3.     <input v-model="val"><br/>  
  4.     子组件:  
  5.     <test :test.sync="val"></test>  
  6. </div>  
  7. <script>  
  8.     var vm = new Vue({  
  9.         el: '#app',  
  10.         data: {  
  11.             val: 1  
  12.         },  
  13.         components: {  
  14.             "test": {  
  15.                 props: ['test'],  
  16.                 template: "<input v-model='test'/>"  
  17.             }  
  18.         }  
  19.     });  
  20. </script>  

效果是无论你改哪一个的值,另外一个都会随之变动。

 

【4】props验证:

简单来说,当组件获取数据时,进行验证,只有符合条件的时候,才会使用之。

 

写法是将props变为一个对象,被验证是值是对象的key,验证条件是和key对应的value。

例如:

[javascript] view plain copy
 
  1. props: {  
  2.     test: {  
  3.         twoWay: true  
  4.     }  
  5. },  

验证test这个变量是不是双向绑定,如果不是,则报错。(注意,这个不能用于验证单向绑定)。

 

示例代码如下:

[html] view plain copy
 
  1. <div id="app">  
  2.     父组件:  
  3.     <input v-model="val"><br/>  
  4.     子组件:  
  5.     <test :test="val"></test>  
  6. </div>  
  7. <script>  
  8.     var vm = new Vue({  
  9.         el: '#app',  
  10.         data: {  
  11.             val: 1  
  12.         },  
  13.         components:{  
  14.             test:{  
  15.                 props: {  
  16.                     test: {  
  17.                         twoWay: true  
  18.                     }  
  19.                 },  
  20.                 template: "<input v-model='test'/>"  
  21.             }  
  22.         }  
  23.     });  
  24. </script>  

更多验证类型请查看官方教程:

http://cn.vuejs.org/guide/components.html#Prop__u9A8C_u8BC1

转自:http://blog.csdn.net/qq20004604/article/details/52435688

posted on 2017-12-09 16:40  双王木  阅读(225)  评论(0编辑  收藏  举报

导航