Vue组件间通信

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

目录结构

一、props 和 $emit

1.父组件向子组件传值

// App.vue
<template>
    <div id="app">
        <Parent></Parent>
    </div>
</template>

<script>
import Parent from './components/Parent'
export default {
    name: "app",
    components: {
        Parent,
    }
};
</script>

// Parent.vue
<template>
    <div>
        父组件：{{number}}
        <Son_1 :number="number"></Son_1>
    </div>
</template>

<script>
import Son_1 from './Son_1'

export default {
    name: "Parent",
    components: {
        Son_1,
    },
    data() {
        return {
            number: 10
        };
    },
    methods: {}
}
</script>

// Son_1.vue
<template>
    <div>
        <div>子组件1: {{number}}</div>
    </div>
</template>

<script>
export default {
    name: "Son_1",
    // props: ['number'],
    props: {
        number: {
            type: Number,
            required: true,
        }
    },
    data() {
        return {
        };
    },
    methods: {}
}
</script>

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

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

// Son_1.vue
<button @click='handleChangeNumber'>修改</button>

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

// Parent.vue
<Son_1 :number="number" @numberChange="numberChange"></Son_1>

// 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 :number="number" name="cherries" @numberChange="numberChange"></Son_1>

// Son_1.vue
<Grandson_1 v-bind="$attrs" v-on="$listeners"></Grandson_1>

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

// Grandson_1.vue
<template>
    <div>
        <div>
            Grandson_1: {{$attrs.name}}
        </div>
        <button @click="$listeners.numberChange(20)">修改</button>
    </div>
</template>

<script>
export default {
    name: "Grandson_1",
    data() {
        return {
        };
    },
}
</script>

三、Provide 和 Inject

名词解释

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

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

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

四、Ref

名词解释

Ref：获取组件实例

// Parent.vue
<Son_1 :number="number" name="cherries" @numberChange="numberChange" ref="son_1"></Son_1>

// 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

下一篇详细介绍