vuejs --- 父组件向子组件传值(父传子)

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

首先,举个例子:

                  有子组件 ---- A.vue    B.vue     C.vue

                  A.vue中有一个数组-》listArr,这个数组在B.vue 和  C.vue 中也要用到,每个页面都去写listArr数组,比较麻烦

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

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

父组件向子组件传值,属于 属性传值

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

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

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

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

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

下面来看一下示例:

Users.vue文件,在App.vue中引用,正常显示,

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

-》看一下添加了数组Users的App.vue,

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

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

在子组件Users.vue,通过 -》props 接收一下父组件所传的数组-》users

如下图所示:

如此,便是父传子了。:)

--------->   为加深印象而写,如有不妥,欢迎留言。:)

发布了66 篇原创文章 · 获赞 13 · 访问量 9万+

猜你喜欢

转载自blog.csdn.net/weixin_42220533/article/details/90446340