让每一名学员高薪就业
返回列表 发新帖

Vue.js 2.x父子组件通信

[复制链接]

45

主题

50

帖子

623

积分

版主

Rank: 7Rank: 7Rank: 7

积分
623

版主

发表于 2018-1-3 15:12:37  | 显示全部楼层 | 阅读模式
一、基本用法(父子组件向子组件通信)
Vue里面组件不仅是需要把模板的内容复用,更重要的是组件之间是需要通信的,我们先来说一种比较简单的情况,通常父组件包含子组件的时候,父组件要正向的向子组件传递数据和参数,子组件接收到后,可以根据参数的不同来渲染不同的内容或执行操作,这里是怎么来实现呢?
现在我们先来看看用props来传递数据的情况,在组件中,需要用选项props来声明需要从父级组件接收的数据,prop的值通常有两种,分别是字符串数组和对象,现在我们以数组为例子:我们构造一个数组,接收来自父级组件的message,并把它在组件模板中渲染。如下为示范代码:

Vue组件通信297.png
渲染后的结果为:

Vue组件通信310.png
需要注意的是,props中声明的数据与组件data函数return的数据时有区别的,props的数据来自父级,而data中的是组件自己的数据,作用域是组件本身,这两种数据都可以在模板template、计算属性computed和方法mothods中使用。示例中的数据message就是通过props从父级传递过来的,在该组件的自定义标签上直接写props的名称,如果需要传递多个数据,在props数组中直接添加即可。
注意:由于HTML特性不区分大小写,当使用DOM模板时,驼峰命名的props名称要转为短横线分隔命名
很多时候,传递的数据不是死的,而是来自父级的动态数据,这个时候,需要使用指令v-bind来动态绑定props的值,当父组件的数据发生变化,也会传递给子组件,示例代码如下:

Vue组件通信657.png
渲染结果如下:

Vue组件通信667.png
二、自定义事件(子组件向父组件通信)
当子组件需要向父组件传递数据时,就要用到自定义事件,v-on除了监听DOM事件外,还可以用于组件之间的自定义事件。在js的设计观察者模式里面有dispathEvent和addEventListener两个方法,Vue也要类似的一套模式,子组件用$emit()来触发事件,父组件用$on()来监听子组件的事件。当然,父组件可以直接在子组件的自定义标签上用v-on来监听子组件触发的自定义事件,示例代码如下:

Vue组件通信892.png

Vue组件通信894.png
程序执行结果如下:

Vue组件通信907.png
示例中子组件有两个按钮,分别绑定了加1和减1的事件,并且在methods中实现了绑定了两个事件,在methods的事件实现中,通过$emit()方法,把它传递给父组件,父组件用@increase 和 @reduce接收,$emit()方法的第一个参数是自定义事件的名称,后面的参数是要传递的数据,父组件即可接收子组件传递的数据渲染页面,显示出加1过后的值。
二、任何组件之间自由通信(父子、兄弟、跨级)
在vue.js 2.x中,推荐使用一个空的Vue实例作为中央总线(bus),也就是中介,他可以实现任何组件之间的通信。就像一个中介,通信的任何组件之间,只需要通过这个中介(bus),实现通信,示例代码如下:

Vue组件通信1214.png
执行结果如下:
点击之前:

Vue组件通信1230.png
点击之后:

Vue组件通信1238.png
示例中首先创建了一个Vue实例bus(中介),里面没有任何的内容,然后全局定义了一个组件component-a,最后,创建了Vue实例app,在app初始化的时候,在生命周期mounted的钩子函数里监听了来自bus的事件on-message,而在组件component-a中,点击按钮会通过bus把事件on-message发出去,而app就会接收来自bus的事件,进而在回调里完成自己的业务逻辑即可。
这种方法非常巧妙的实现任何组件之间的通信。包括父子、兄弟、跨级等,如果深入使用,我们甚至还能扩展bus实例,给他添加data、methods、computed等等选项。
掌握以上的知识点,即可在使用vue开发项目的过程中,实现任何组件之间的通信。


本文章由源码时代H5前端学科讲师原创!
转载须注明出处(http://www.itsource.cn)!感谢大家的配合!

回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表