vue中props将父组件方法传递,vue props传递一个对象

　　本文主要介绍在vue中使用prop进行父子通信时的注意事项。通过实例非常详细，对大家的学习或者工作都有一定的参考价值。有需要的朋友可以参考一下。

目录

　　注1注2注3:单数据流注4汇总

注意点一

　　当上传一个普通的字符串到一个组件时，我们可以直接这样写：

　　一个名字=张三/一

　　需要注意的是，当我们要传入一个数字时，需要用v-bind绑定一个数字，否则无法识别数字，vue会认为你传入的是一个字符串数字。

　　特殊值包括：当将这些类型的数据转移到字符键时，我们需要使用v-bind来告诉vue我们正在转移静态值。

　　布尔数组对象one name=张三:age=1/one

注意点二

　　当我们想把一个对象的所有属性传递给子组件时，我们可以这样写：

　　//要传输的对象

　　帖子：{ id: 1，标题：我与Vue的旅程 }

　　//直接使用v-bind将post对象的所有属性传递给子组件。

　　一个v-bind=post /one

　　子组件接收：

　　//直接接受父组件传递的对象中的属性名即可。

　　道具：[id ， title]，

注意点三：单项数据流

　　的所有道具在它们的父道具和子道具之间制造一个单向下行绑定:父道具的更新会向下流到子组件中，但反之则不会。这将防止子组件意外更改父组件的状态，从而使应用程序的数据流难以理解。

　　此外，每次父组件更改时，子组件中的所有属性都将刷新为最新值。这意味着您不应该在子组件中更改属性。如果您这样做，Vue将在浏览器的控制台中发出警告。

　　在两种常见情况下，您会尝试更改道具：

　　这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地数据属性，并使用该属性作为其初始值：

　　道具：[initialCounter]，

　　数据：函数(){

　　返回{

　　计数器：this.initialCounter

　　}

　　}这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个属性的值来定义一个计算属性：

　　道具：[size]，

　　计算值：{

　　normalizedSize:函数(){

　　返回this.size.trim()。toLowerCase()

　　}

　　}注意在JavaScript中，对象和数组都是通过引用传入的，所以对于一个数组或者对象类型的道具，在子组件将会中改变这个对象或者数组本身会影响父组件的状态。

注意点四

　　当使用一个组件时，如果我们在它上面写了非props属性，那么这些属性将被用作组件根元素上的自定义属性。如果组件根元素具有相同的属性，则该属性将被覆盖。使用组件时传入的值会作为最终的属性值。

　　而styleattribute会稍微聪明一点，就是把两边的值合并得到最终的值。

　　如果我们不希望这个缺省值向组件的根元素添加非props属性，我们可以在组件的选项中配置inheritAttrs: false。设置后，默认情况下，非props属性不会添加到根元素中。

　　其次，我们还可以结合$attrs来手动决定将这些非道具属性赋予哪个元素。

　　例如，所有属性都可以分配给标签。

　　模板

　　div class=one

　　span v-bind=$attrs/span

　　/div

　　/模板

总结

　　关于vue中使用prop进行父子交流时的注意事项这篇文章就到这里了。更多关于vue中使用prop进行亲子沟通的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。