Vuejs 组件——props数据传递的实例代码
本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#Props 本文是在官方文档的基础上,更加细致的说明,代码更多更全。 简单来说,更适合新手阅读 props数据传递①组件实例的作用域:是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享。 渲染结果是: 2个按钮,第一个的值是123,第二个的值是456(虽然他们都是btn) ②使用props绑定静态数据:【1】这种方法用于传递字符串,且值是写在父组件自定义元素上的。 【2】下面示例中的写法,不能传递父组件data属性中的值 【3】会覆盖模板的data属性中,同名的值。 示例代码: 这种写法下,btn的值是h,而不是123,或者是hello。 【4】驼峰写法 假如插值是驼峰式的,而在html标签中,由于html的特性是不区分大小写(比如LI和li是一样的),因此,html标签中要传递的值要写成短横线式的(如btn-test),以区分大小写。 而在props的数组中,应该和插值保持一致,写成驼峰式的(如btnTest)。 例如: btn:{{btnTest}}",
正确的写法: 假如插值写短横线式,或者是html标签写成驼峰式,都不能正常生效。(除非插值不写成驼峰式——跳过大小写的限制,才可以) ③利用props绑定动态数据:简单来说,就是让子组件的某个插值,和父组件的数据保持一致。 标准写法是(利用v-bind): 如代码 说明: 【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}看做是一个对象); 如代码: 这里的btn的值是3(而不是没有加v-bind时,作为字符串的1+2) ⑤props的绑定类型:【1】简单来说,分为两种类型,即单向绑定(父组件能影响子组件,但相反不行)和双向绑定(子组件也能影响父组件); 【2】单向绑定示例:(默认,或使用.once) 子组件:说明: 当父组件的值被更改后,子组件的值也随之更改; 当子组件的值被更改后,父组件的值不会变化,而假如再次修改父组件的值,子组件会再次同步。 另外需要注意的是,子组件如果要同步绑定,那么子组件的input需要是v-model,而不能是value属性(那样只能单项绑定,且修改子组件的值后会失去绑定) 【3】双向绑定: 需要使用“.sync”作为修饰词 如示例: 子组件:效果是无论你改哪一个的值,另外一个都会随之变动。 【4】props验证: 简单来说,当组件获取数据时,进行验证,只有符合条件的时候,才会使用之。 写法是将props变为一个对象,被验证是值是对象的key,验证条件是和key对应的value。 例如: 验证test这个变量是不是双向绑定,如果不是,则报错。(注意,这个不能用于验证单向绑定)。 示例代码如下: 子组件:更多验证类型请查看官方教程:http://cn.vuejs.org/guide/components.html#Prop__u9A8C_u8BC1 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |