Vue 进阶 [二] Vue 组件化之组件间通信———组件通信看这一篇就足够了

我就是我 2022-12-07 12:11 187阅读 0赞

> 今天又是收获满满的一天，但也会发现越往前走，知道的越多，不知道的也越多，但是通过学习，弱化知识盲区，对自己的实际开发选择会有很大的影响，也会影响编程思维。

# 概述 #

组件系统是vue的一个重要概念，因为它是一种抽象，让我们可以使用独立可抽象的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。**所谓组件化，就是把页面拆分成多个独立的组件，每个组件依赖的 css js 模板 图片 等资源等放在一起开发和维护，所以组件化在系统内部可复用，组件之间可以嵌套。**因此组件化能**提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，编译多人协同开发。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

# **组件通讯常用方式** #

### **props** ###

父组件给子组件传值：

<template>
        <div>
            <h6>Child1</h6>
            {
       {msg}}
            <button @click="$emit('back','这就回家吃饭')">回复父组件 </button>
        </div>
    </template>
    
    <script>
    export default {
      props: {
        msg: {
          type: String
        }
      }
    };
    </script>

### **事件总线** ###

任意两个组件之间传值，常用事件总线或者vuex ，事件总线进行传值分为三步：1、全局注册时间总线 2、 监听接受消息 3、 发送消息

//全局创建时间总线
    Vue.prototype.$bus = new Vue()

this.$bus.$on("event-from-child2", msg => {
          console.log("Child1", msg);
        });

this.$bus.$emit("event-from-child2", "Hi brother child1,I am child2");

### **vuex** ###

创建唯一的数据管理者store，通过它管理数据并通知组件更新状态。主要组成部分如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1][]

### **$parent/$root**  ###

**兄弟组件通信 可以通过祖辈组件进行搭桥 $parent 和 $root ,示例如下：：**

this.$parent.$emit('event-from-child2', 'some msg from child2')
    
     this.$parent.$on("event-from-child2", msg => {
          console.log(msg);
        });

其实发送和监听消息的都是父组件，但是因为在子组件中可以通过特定API访问到父组件，所以可以获取到对应的传递数据。

### **$children**  ###

**父组件可以通过 $children 访问子组件实现父子组件之间的通讯**

**主要就是通过$children 获取子组件，再访问子组件的方法以便进行通信，** **$children 是当前组件的所有子组件的实例集合**

![20200916152228999.PNG][]

this.$children[0].eat();
      console.log(this.$children);
    
    //注意：： 子组件并不一定是按照顺序依次放在children 的集合中的，因为每个组件挂载的顺序并不是遵循从上到下的原则

### **$attrs/$listeners**  ###

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

========================

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

// 父组件
     <child2 msg='我是爸爸,你要听话啊' from="爸爸"></child2>
    
    // 子组件
     <p>{
       {$attrs}}</p>

显示结果：：

![20200916155349704.PNG][]

### **refs**  ###

**获取子节点引用**

<child1 msg="child你该回家吃饭" @back="back" ref="child1Ref"></child1>
     
     //使用
      this.$refs.child1Ref.eat();

### **provide/inject**  ###

**可以实现祖先和后代之间的通讯**

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

// 祖先组件 
    provide() {
        return { foo: "barbarbarbarbarbar" };
      },
    //子孙组件
      inject: ["foo"], // 可以直接使用foo

进阶打基础

### 整体练习代码地址 ###

[https://gitee.com/xiaozhidayu/vue-study-component][https_gitee.com_xiaozhidayu_vue-study-component]

[https://gitee.com/xiaozhidayu/vue-study-component.git][https_gitee.com_xiaozhidayu_vue-study-component.git]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221123/d9c4022d628e4c35b07e4dcf9b62a2f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/a8f5666aeab749cf8a1e08c5c39c87a1.png
[20200916152228999.PNG]: /images/20221123/05fea48e3f5f4c82adff3c20989d5633.png
[20200916155349704.PNG]: /images/20221123/fe19e435b2724ddf98b845c2c708f130.png
[https_gitee.com_xiaozhidayu_vue-study-component]: https://gitee.com/xiaozhidayu/vue-study-component
[https_gitee.com_xiaozhidayu_vue-study-component.git]: https://gitee.com/xiaozhidayu/vue-study-component.git