组件通信

Vue组件间通信

一、总结

没错，先总结，后讲解

父子通信

父向子传递数据是通过 props，子向父是通过 events（$emit）；通过父链 / 子链也可以通信（$parent / $children）；ref 也可以访问组件实例；provide / inject API；$attrs/$listeners

兄弟通信

$Bus；Vuex

跨级通信

$Bus；Vuex；provide / inject API、$attrs/$listeners

二、父传子 props

父组件通过v-bind绑定到子组件。子组件通过props接收传过来的值

总结：父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed

父组件示例：父子组件关联起来，并通过v-bind（即简写“：”）将父组件中的parentAge值，传递给子组件

v-on绑定的属性名称deliverParentAge与data中定义的parentAge名称可以不一样

属性deliverParentAge通过v-bind绑定的，也是子组件中通过props接收的，而parentAge是要传递给子组件的数值，它是一个值

<template>
    <div class="my-parent">
        <h3>我是父组件，我想告诉我的子组件，我的年龄值是:{{parentAge}}</h3>
        <h3>我要通过v-bind(即简写":")语法糖绑定一个属性deliverParentAge，将父组件的值传递到子组件中</h3>
        <!-- 下面就是我的子组件 -->
        <my-child :deliverParentAge="parentAge"></my-child>

        </div>
    </template>

<script>
import MyChild from "./Child";
export default {
    components: { MyChild },
    data() {
        return {
            parentAge: 49
        };
    }
};
</script>

子组件示例：子组件通过props属性，在子组件中接收父组件传过来的值

<template>
    <div class="my-child">
        <h5>我是子组件，我可以通过属性props来接收父组件传过来的年龄值是：{{deliverParentAge}}</h5>
    </div>
</template>

<script>
export default {
    data() {
        return {
            childAge: 27
        };
    },
    props: {
        deliverParentAge: Number
    }
};
</script>

三、子传父 events($emit)

子组件定义一个事件，父组件通过v-on接收这个事件和传递过来的值

总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

现在来修改父组件的值（这个不是真的修改而是通过this.$emit提交一个事件，将子组件的行为告诉父组件）

<template>
    <div class="my-child">
        <h5>我是子组件，我可以通过属性props来接收父组件传过来的年龄值是:{{deliverParentAge}}，这是一个数字类型</h5>
        <h5>并且，我要告诉他，他今年生日已经过了，所以他的年龄应该<button @click="AddAge">加1</button></h5>
            下面我要通过this.$emit方法提交一个事件addParentAge，告诉我的父组件，他的实际年龄
    </div>
</template>

<script>
export default {
    data() {
        return {
            childAge: 27
        };
    },
    props: {
        deliverParentAge: Number
    },
    // 新建一个计算属性，将父组件原来的值加1
    computed: {
        parentActualAge() {
            return this.deliverParentAge + 1;
        }
    },
    methods: {
        AddAge() {
            this.$emit("addParentAge", this.parentActualAge);
        }
    }
};
</script>

父组件通过语法糖v-on（即简写为“@”）来监听子组件提交的事件addParentAge

this.$emit提交的事件名称addParentAge，与方法handleAddParentAge名称可以不一样

addParentAge是子组件提交的事件名称，也是父组件通过v-on监听的事件名称，而handleAddParentAge是父组件自定义的方法名称

<template>
    <div class="my-parent">
        <h3>我是父组件，我想告诉我的子组件，我的年龄值是:{{parentAge}}</h3>
        <h3>我要通过v-bind(即简写":")语法糖绑定一个属性parentAge，告诉子组件我的年龄值是:{{parentAge}}</h3>
        <!-- 下面就是我的子组件 -->
        <my-child :deliverParentAge="parentAge"
            @addParentAge="handleAddParentAge"></my-child>
        <h3>通过监听子组件提交的事件addParentAge，我知道到了自己的实际年龄应该是:{{parentAge+1}}，并通过方法handleAddParentAge，在控制台打印出我的真实年龄</h3>
    </div>
</template>

<script>
import MyChild from "./Child";
export default {
    components: { MyChild },
    data() {
        return {
        parentAge: 49
        };
    },
    methods: {
        handleAddParentAge(actualAge) {
            console.log("父组件的实际年龄是：", actualAge);
        }
    }
};
</script>

四、爷孙通信 provide / inject

简介

Vue2.2.0新增API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。

provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

总结：通过provide传值，通过inject接收。

五、跨级通信 vuex

vuex的原理

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutations进行，Mutations同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。

各模块在流程中的功能

Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。
dispatch：操作行为触发方法，是唯一能执行action的方法。
actions：操作行为处理模块,由组件中的$store.dispatch('action 名称', data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。
commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
mutations：状态改变操作方法，由actions中的commit('mutation 名称')来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。
state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。
getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

Vuex与localStorage

vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state。

六、跨级只传值 $attrs/$listeners

简介

多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法----$attrs/$listeners

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

七、$eventBus

$eventBus

$eventBus 主要作用是进行非父子组件信息传递

$eventBus

新建 event-bus.js 文件

// event-bus.js
import Vue from 'vue'
export const eventBus = new Vue()

第一步：在main.js中将$eventBus绑定到vue原型上

Vue.prototype.$eventBus = new Vue()

第二步：在需要传递信息的组件上将一个方法发射出去，并需要在某个条件激活这个方法

<div @click="busclick">按钮</div>
import { eventBus } from "../event-bus.js";

methods(){
  busclick(){
    this.$eventBus.$emit('busfunction')
  }
}

第三步：在组件的创建时created中接收emit的方法，并执行回调函数

created(){
  this.$eventBus.$on('busfunction'，()=>{
    this.$refs.scroll.refresh()
  })
}

第四步：在beforeDestroy里销毁事件总线，不销毁的话会一直叠加的调用这个方法,如果这个子组件在不同的页面都调用这个子组件，那么在一个父组件this.off("busfunction");会把其他附件也销毁，如果只单独销毁一个父组件，那么需要在后面指定调用函数this.off("busfunction"，callback（）);

beforDestroy（）{
  this.$eventBus.$off("busfunction");  //当这个组件销毁的时候bus也跟着一起销毁
},
beforDestroy（）{
  this.$eventBus.$off("busfunction"，callback（）);  //当这个组件销毁的时候bus也跟着一起销毁
}

Vue3.X 使用eventbus

安装mitt依赖包

npm install mitt@2.1.0

创建eventBus.js文件

// 导入mitt包
import mitt from 'mitt'
// 创建eventbus的实例对象
const bus = mitt()

// 将eventbus的实例对象共享出去
export default bus

在数据接收方声明事件

在数据接收方，调用bus.on('事件名称', 事件处理函数)方法注册一个自定义事件。

import bus from './eventBus.js'
export default {
  data () {
    return {
      count: 0
    }
  },
  created () {
    bus.on('countChange', (count) => {
      this.count = count
    })
  }
}

在数据发送方触发事件

在数据发送方，调用bus.emit('事件名称', 要发送的数据)方法触发自定义事件。

import bus from './eventBus.js'
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    addCount () {
      this.count++
      bus.emit('countChange', this.count)
    }
  }
}

# 组件通信

# Vue组件间通信

# 一、总结

# 二、父传子 props

# 三、子传父 events($emit)

# 四、爷孙通信 provide / inject

# 五、跨级通信 vuex

# 六、跨级只传值 $attrs/$listeners

# 七、$eventBus