Vuejs第九篇之组件作用域及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的值
|