古之立大事者,不惟有超世之才,亦必有坚忍不拔之志。

Vue.js父子组件通信方式和样例

Javascript admin 19℃ 0评论

一. 父子组件通信方式一览

几种通信方式无外乎以下几种:

  • Prop(常用)
  • $emit (组件封装用的较多)
  • .sync语法糖 (较少)
  • $attrs & $listeners (组件封装用的较多)
  • provide & inject (高阶组件/组件库用的较多)
  • slot-scope & v-slot (vue@2.6.0+)新增
  • scopedSlots 属性
  • 其他方式通信

1. Prop

英式发音:[prɒp]。这个在我们日常开发当中用到的非常多。简单来说,我们可以通过 Prop 向子组件传递数据。用一个形象的比喻来说,父子组件之间的数据传递相当于自上而下的下水管子,只能从上往下流,不能逆流。这也正是 Vue 的设计理念之单向数据流。而 Prop 正是管道与管道之间的一个衔接口,这样水(数据)才能往下流。说这么多,看代码:

你可以狠狠的戳这里查看Demo!浏览器输出:

2. $emit

英式发音:[iˈmɪt]。官方说法是触发当前实例上的事件。附加参数都会传给监听器回调。按照我的理解不知道能不能给大家说明白,先简单看下代码吧:

你可以狠狠的戳这里查看Demo! 大致逻辑是酱婶儿的:当我在页面上点击按钮时,触发了组件 MyButton 上的监听事件 greet,并且把参数传给了回调函数 sayHi 。说白了,当我们从子组件 Emit(派发) 一个事件之前,其内部都提前在事件队列中 On(监听)了这个事件及其监听回调。其实相当于下面这种写法:

3. .sync 修饰符

这个家伙在 vue@1.x 的时候曾作为双向绑定功能存在,即子组件可以修改父组件中的值。因为它违反了单向数据流的设计理念,所以在 vue@2.0 的时候被干掉了。但是在 vue@2.3.0+ 以上版本又重新引入了这个 .sync 修饰符。但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。说白了就是让我们手动进行更新父组件中的值了,从而使数据改动来源更加的明显。下面引入自官方的一段话:

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。

既然作为一个语法糖,肯定是某种写法的简写形式,哪种写法呢,看代码:

于是我们可以用 .sync 语法糖简写成如下形式:

废话这么多,如何做到“双向绑定” 呢?让我们进段广告,广告之后更加精彩! … 好的,欢迎回来。假如我们想实现这样一个效果:改变子组件文本框中的值同时改变父组件中的值。怎么做?列位不妨先想想。先看段代码:

你可以狠狠的戳这里查看Demo!下面划重点,代码里有这一句话:

官方语法是:update:myPropName 其中 myPropName 表示要更新的 prop 值。当然如果你不用 .sync 语法糖使用上面的 .$emit 也能达到同样的效果。仅此而已!

4. $attrs & $listeners

  • 官网对 $attrs 的解释如下:

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (classstyle 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (classstyle 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

  • 官网对 $listeners 的解释如下:

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

我觉得 $attrs$listeners 属性像两个收纳箱,一个负责收纳属性,一个负责收纳事件,都是以对象的形式来保存数据。看下面的代码解释:

从 Html 中可以看到,这里有俩属性和俩方法,区别是属性一个是 prop 声明,事件一个是 .native 修饰器。

你可以狠狠的戳这里查看Demo! 可以看到,我们可以通过 $attrs$listeners 进行数据传递,在需要的地方进行调用和处理,还是很方便的。当然,我们还可以通过 v-on="$listeners" 一级级的往下传递,子子孙孙无穷尽也!

一个插曲!

当我们在组件上赋予了一个非Prop 声明时,编译之后的代码会把这些个属性都当成原始属性对待,添加到 html 原生标签上,看上面的代码编译之后的样子:

这样会很难看,同时也爆了某些东西。如何去掉?这正是 inheritAttrs 属性的用武之地!给组件加上这个属性就行了,一般是配合 $attrs 使用。看代码:

再次编译:

5. provide & inject

他俩是对CP, 感觉挺神秘的。来看下官方对 provide / inject 的描述:

provideinject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。并且这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

看完描述有点懵懵懂懂!一句话总结就是:小时候你老爸什么东西都先帮你存着等你长大该娶媳妇儿了你要房子给你买要车给你买只要他有的尽量都会满足你。下面是这句话的代码解释:

你可以狠狠的戳这里查看Demo!

6. slot-scope & v-slot

关于这种方式的介绍,请看我这篇文章的介绍。传送门->

7. scopedSlots 属性

关于这种方式的介绍,请看我这篇文章的介绍。传送门->

8. 其他方式通信

除了以上五种方式外,其实还有:

  • EventBus

思路就是声明一个全局Vue实例变量 EventBus , 把所有的通信数据,事件监听都存储到这个变量上。可以阅读使用Event Bus进行Vue组件间通信了解更多。这样就达到在组件间数据共享了,有点类似于 Vuex。但这种方式只适用于极小的项目,复杂项目还是推荐 Vuex。下面是实现 EventBus 的简单代码:

你可以狠狠的戳这里查看Demo!

  • Vuex

官方推荐的,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

  • $parent

父实例,如果当前实例有的话。通过访问父实例也能进行数据之间的交互,但极小情况下会直接修改父组件中的数据。

  • $root

当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。通过访问根组件也能进行数据之间的交互,但极小情况下会直接修改父组件中的数据。

  • broadcast / dispatch

他俩是 vue@1.0 中的方法,分别是事件广播 和 事件派发。虽然 vue@2.0 里面删掉了,但可以模拟这两个方法。可以借鉴 Element 实现。有时候还是非常有用的,比如我们在开发树形组件的时候等等。

二. 父子组件通信样例

子组件通过事件向父组件同部数据,下面展示的是通过$emit事件传递。

1、先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文件夹内,模拟父组件名称为Home.vue。

2、效果图里面可以看出有两个三个元素:输入框、单选框、和新增按钮。

  • 输入框使用v-model绑定值,方便后边获取到输入框数值;
  • 单选框同样使用v-model绑定值,在新增时,将picked的值同步至父组件;
  • 新增按钮,新增时将表单元素的组件值,操作传递事件;

子组件元素代码:

子组件数据、事件均放在script里面:

顺便贴下子组件的样式

3、父组件在使用子组件时,先获取到子组件,一并在代码里面展示组件事件

父组件的script内,获取子组件、初始列表数据、以及组件数据传递方法,代码有简单说明

父组件通过v-on,添加事件方法

按照流程,随便贴下父组件样式

参考文献

转载请注明:北凉柿子 » Vue.js父子组件通信方式和样例

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址