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

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

概述

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

组件通讯常用方式

props

父组件给子组件传值：

<h3>组件通讯</h3>
<child1 msg="child你该回家吃饭" @back="back"></child1>

<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，通过它管理数据并通知组件更新状态。主要组成部分如下：

 

$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 是当前组件的所有子组件的实例集合

  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>

显示结果：：

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.git