Vue组件间通信

先创建一个 vue 项目，把不需要的删掉，在components中新建文件

目录结构

一、props 和 $emit

1.父组件向子组件传值

// App.vue

// Parent.vue

// Son_1.vue

总结：父组件通过在子组件的实例上加属性的方式，向子组件传值，子组件通过 props 接收所需要的值。

2.子组件向父组件传值。（通过事件的形式）

// Son_1.vue
修改

// Son_1.vue
methods: {
    handleChangeNumber() {
        this.$emit('numberChange', 9) // 第二个参数为传递的参数
    }
}

// Parent.vue

// Parent.vue
created() {
   //  this.$on('numberChange', this.numberChange)  // 除了直接写在子组件上还可以在父组件监听这个事件
},
methods: {
    numberChange(e) {
        this.number = e
    }
}

总结：子组件通过 $emit 方法去通知父组件，父组件接收到后，执行需要的操作。

二、$attrs 和 $listeners

名词解释

$attrs：继承所有的父组件属性（除了prop传递的属性、class 和 style），并且可以通过 v-bind="$attrs"传入内部组件，在创建更高层次的组件时非常有用。
$listeners：包含了父作用域中的（不包含.native修饰器）v-on 事件监听器，并且可以通过 v-on="$listeners" 传入内部组件，在创建更高层次的组件时非常有用。

// Parent.vue

// Son_1.vue

// Son_1.vue
import Grandson_1 from './Grandson_1'

// Grandson_1.vue

三、Provide 和 Inject

名词解释

Provide： 在父级中注入数据
Inject：在任意子组件中可以注入父级数据

// Parent.vue
provide() {
    return {
        msg: "provide"
    };
},

// Grandson_1.vue
// inject: ['msg'],
inject: {
    msg: {
        type: String,
    }
},

四、Ref

名词解释

Ref：获取组件实例

// Parent.vue

// Parent.vue
mounted() {
    console.log(this.$refs.son_1); // 获取到 Son_1 的实例
}

五、EventBus 用于跨组件之间通讯

// main.js
Vue.prototype.$bus = new Vue();

import Son_2 from './Son_2'

components: {
    Son_1,
    Son_2,
},

// Son_2.vue
mounted() {
    this.$bus.$on("son_2", data => {
        console.log(data);
    });
},

// Grandson_1.vue
mounted() {
    this.$nextTick(() => {
        this.$bus.$emit("son_2", "我是Grandson_1");
    });
},

六、Vuex

下一篇详细介绍