【Vue】组件通信

文章目录

• 一、组件之间如何通信
• 二、组件关系分类
• 三、通信解决方案
• 四、父子通信流程
• 五、父向子通信代码示例
• 六、子向父通信代码示例

组件通信，就是指组件与组件之间的数据传递

• 组件的数据是独立的，无法直接访问其他组件的数据。
• 想使用其他组件的数据，就需要组件通信

一、组件之间如何通信

思考：

1. 组件之间有哪些关系？
2. 对应的组件通信方案有哪几类？

二、组件关系分类

1. 父子关系 （A与B、A与C）
2. 非父子关系 （B与C）

三、通信解决方案

四、父子通信流程

1. 父组件通过 props 将数据传递给子组件

   ① 父中给子添加自定义属性传值

   ② 子props 接收

   ③ 子组件使用

   props用大白话将就是组件标签身上新增的一个一个自定义属性

2. 子组件利用 $emit 通知父组件修改更新

   ① 子$emit 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数

五、父向子通信代码示例

父组件通过props将数据传递给子组件

父组件App.vue

  
    我是APP组件
    
    
    
  

子组件Son.vue

  
      
    我是Son组件  {{ title }}
  

父向子传值步骤

1. 给子组件以添加属性的方式传值
2. 子组件内部通过props接收
3. 模板中直接使用 props接收的值

六、子向父通信代码示例

子组件利用 $emit 通知父组件，进行修改更新

子向父传值步骤

1. $emit触发事件，给父组件发送消息通知
2. 父组件监听$emit触发的事件
3. 提供处理函数，在函数的形参中获取传过来的参数

Son.vue

  
    我是Son组件 {{ title }}
    修改title
  

App.vue

  
    我是APP组件