本文共 786 字，大约阅读时间需要 2 分钟。

一,前言

前面介绍了子组件使用props接收来自父组件传递的参数及验证这种传递是父组件->子组件传递数据而父子组件通信还要实现子组件->父组件传递数据组件间的通信按照关系可分为:父子组件通信,兄弟组件通信,跨级组件通信三种

二,子组件向父组件通信

对于父子组件通信中的父组件通过子组件props选项向子组件传参已经介绍过了那么子组件如何向父组件传递数据呢?当子组件向父组件传递数据时,要用到自定义事件

什么是自定义事件:

Vue组件中有一套机制,类似于观察者模式(也被称作订阅发布模式),称为自定义事件

自定义事件的使用:

子组件使用$emit()触发事件,父组件使用$on监听子组件事件父组件也可以直接在子组件的自定义标签上使用v-on监听子组件触发的自定义事件

如图所示:

三,父子组件通信的方法

有了以上了解,通过下边的Demo演示并说明父子组件通信

   
    
    
     父组件数据: {
  { parentMsg }}
    
    
    向子组件发送数据    
    
   

初始化显示:

由于parentMsg和childMsg初始值为空,所以子组件初始化msg也为空

点击父组件中’向子组件发送数据’按钮:

childMsg值为'来自父组件的数据',通过子组件props选项传入子组件并显示

点击子组件中’向父组件发送数据’按钮:

触发组件内部handle方法,通过$emit触发子组件传入的Vue实例方法sendMsgToParentsendMsgToParent中改变了parentMsg值为'来自父组件的数据',触发页面更新

四,结尾

父组件向子组件传参可以使用props选项,这篇主要介绍子组件如何向父组件进行通信父子组件的通信很简单,下面介绍兄弟组件通信和跨级组件通信的实现

维护记录: