vuejs — 父组件向子组件传值（父传子）「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

来看一下vue中的父组件向子组件传值的过程：

（父组件）向（子组件）传值，那么子组件需要一个属性接收，大家应该都知道，使用 props 来接收；

举个例子：

有子组件 —- A.vue（父组件） B.vue（子组件） C.vue（子组件）

A.vue中有一个数组-》listArr，这个数组也是B.vue 和 C.vue 的需要的数据，每个页面都去写listArr数组，比较麻烦，

那怎么用简单方便的方法实现这个效果呢？？？

可以将这个数组，提出来放到父组件中，谁要用父组件就传给谁。

父组件向子组件传值，属于 属性传值。

props是子组件访问父组件数据的唯一接口.

单向数据流： props是单向绑定的

当父组件的属性变化时，将传导给子组件，但是反过来不会。

每次父组件更新时，子组件的所有 props 都会更新为最新值。

不要在子组件内部改变 props。如果你这么做了，Vue 会在控制台给出警告。

下面来看一下示例：

组件Users.vue，在App.vue中引用，此时数组users在子组件中，如图所示

vuejs --- 父组件向子组件传值（父传子）「建议收藏」

but，该数组users，子组件HelloWorld.vue中也要用到，下面将数组Users提出，放到父组件App.vue中，

-》看一下添加了数组Users的父组件App.vue，

我们思考：父组件、子组件之间有关联的地方是什么，没错，就是在调用子组件的时候，即下图中的<Users></Users>,我们用v-bind:属性=”所传的值” 动态绑定。

vuejs --- 父组件向子组件传值（父传子）「建议收藏」

那如何将父组件的users数组传给子组件呢？？？

在子组件Users.vue，通过 -》props 属性接收父组件所传的数组 -》users

如下图所示：

vuejs --- 父组件向子组件传值（父传子）「建议收藏」

如此，便是父传子了。：）

———> 为加深印象而写，如有不妥，欢迎留言。：）

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/143814.html原文链接：https://javaforall.cn