当前前端估计没有不知道 vue 这个渐进式框架, 由于它容易上手, 支持各种类库, 各种优点, 成为我们开发单页应用的一个不二之选. 下面是我在学习和工作中对组件之间通信和交互方式的归纳, 希望对你有所帮助.
父子组件交互
prop(父 -->子)
父亲想跟儿子说一句: 回来吃饭了. 我们可以这么做~~
首先简单创建两个组件一个叫 father.vue 一个叫 child.vue, 然后父组件 father.vue 在页面中引用自组建 child.vue 格式如下:
然后回到需求本身父亲要跟儿子说回来吃饭了. 也就是父组件要向子组件传递一个信息. 可以选择 prop. 简单的来说 Prop 是你可以在组件上注册的一些自定义特性. 当一个值传递给一个 prop 特性的时候, 它就变成了那个组件实例的一个属性. 直观的解释就是: 自定义的特性可以在对应使用的那个组件上的 props 属性获取到
至此我们就实现了父组件与子组件的通信. 但值的注意有几点:
由于 html 属性对大小写并不敏感, 所以你的自定义属性不能使用大写字母, 如果使用可能会导致无法识别
如果你只是想单纯的传递一个字符串格式的数据, 可以不使用 (v-bind: 自定义属性名) 的写法. 而是直接(属性名 = 值)
$emit(子 -->父)
上面中的场景中提到了父亲叫儿子回来吃饭, 但是儿子正在玩游戏需要 20 分钟之后才能回来, 这个时候儿子要告诉父亲说: 我在玩游戏, 20 分钟之后就回来. 我们可以这么做~~
使用 $emit 进行组件通信的方式就像是我们常说的发布订阅, 这里子组件要说的话这一行为就是发布, 父组件订阅这个事件来获得发布者发布的信息.
至此我们就实现了子组件与父组件的通信. 但值的注意有几点: @childtosay 的写法是 v-on:childtosay 的简写, 监听 / 订阅这个方法的意思.
发布和订阅的方法名称必须统一, 且不能有大写字母, 如果名字过长可以使用短横线在多个单词中连接
slot(父 -->子)
父亲等了半个小时, 儿子才回来, 有点生气. 准备跟儿子约法三章: 1. 每天晚上七点之前必须回来吃饭. 2. 出去玩之前要征得老爸同意. 3. 不能离家太远, 在附近玩. 我们可以这么做~~
现在的需求是我们需要向子组件传递多条数据, 可能这些数据在页面显示的时候还要有一定的样式. 那么 prop 的通信方式就太适用了. 这个时候插槽的功能就显得尤为重要了.
当然了如果多个插槽, 位置顺序有明显变化的, 你可以给它们起一个名字来具体区分:
- //father.vue
- <child>
- <p class="red" slot="rouss">每天晚上七点之前必须回来吃饭.</p>
- <p class="red" slot="rous">出去玩之前要征得老爸同意</p>
- <p class="red" slot="rou">不能离家太远, 在附近玩</p>
- </child>
- //child.vue
- <div>
- <h5 > 我是儿子</h5 > 第 1 条:
- <slot name="rou"></slot > 第 2 条:
- <slot name="rous"></slot > 第 3 条:
- <slot name="rouss"></slot>
- </div>
这样也就确保了多个插槽的位置
$parent(子 -->父)
如果父亲口袋中有儿子的试卷, 但是成绩只有 59 分, 儿子不想被骂, 要偷偷改掉试卷的分数, 可以尝试这么做~~
老师从小教育我们做人要诚实, 所以儿子这样的行为是坚决不可取的, 同样的我们在 vue 的使用中也不推荐这样修改父组件的 data 数据.
$ref(父 -->子)
和 $parent 类似的还有 $ref, 它可以让你在父组件中访问子组件的属性和值, 用法如下:
EventBus (父 <---> 子)
爸爸和儿子都想看电视, 但是遥控器放在谁的手里另外一方都不同意, 这个时候家里的实际掌权者母亲大人就说: 遥控器给我, 你们谁要看什么节目跟我说, 我给你们安排. 这里面母亲大人的角色就是 EventBus
EventBus 就是在声明一个 vue 的实例对象, 所有公共的方法和属性都可以放在这个实例上面, 这样父子组件就都可以进行访问了, 但是如果是大型项目, 还是推荐使用 vuex
vuex(父 <---> 子)
Vuex 是一个专为 vue.js 应用程序开发的状态管理模式, 用法很多, 小弟就不在这里献丑了.
写在最后:小弟学艺不精,水平有限,上面的内容是我对 vue 的一个简单理解,希望对你有所帮助,当然如果你发现哪里有问题,请及时指正,不胜感激。 |
来源: https://juejin.im/post/5c1304645188257c3045eb12