Vuejs中如何实现props数据传递

props: ['btnTest'], 
template: "btn：{{btnTest}}",

说明：

【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。

例如：

props: { 
  test: { 
    twoWay: true 
  } 
},

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

示例代码如下：

 
  父组件： 
  
 
  子组件： 
   
 

以上是“Vuejs中如何实现props数据传递”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！