VUE组件之间通信大全（9种）

        在实际研发过程中，我们会将页面分解，放在 多个VUE文件中。这个时候组件之间通信在所难免！如何进行组件通信？子组件如何使用父组件的元素？父组件如何获取子组件的数据？隔代组件如何通信？兄弟组件之间如何通信？任意组件之间如何共享数据？等等。

        本文共讲解了VUE中9种组件通信/数据共享方式，并提供完整的代码，大家可直接放心使用。

---

方式1：defineProps（父传子、子传父）

父组件中使用变量形式传值、对象、回调方法给子组件、子组件用 defineProps接收

1.1 父组件代码

<template>
    <div>
        <H4>father num: {
    { num }}</H4>
        <button @click="clickAdd">Add</button>

        <!-- 用 属性形式(响应式用冒号属性形式) 传给子组件 num 与 dataMethod-->
        <Child num="100" :dataMethod="dataMethod" />
        <Child :num="num" :dataMethod="dataMethod" />
    </div>
</template>

<script setup lang="ts">
import Child from './Child.vue';
import { ref } from 'vue';

// 直接传给子组件的值/对象
let num = ref(0);
// 传给子组件的方法：子组件可通过该方法修改父组件的值
let dataMethod = (value: number) => {
    num.value += value
}
let clickAdd = () => {
    num.value++
}
</script>

<style scoped>
div {
    background-color: rgb(239, 237, 233);
    width: 100%;
    height: 500px;
}
</style>

1.2 子组件代码

用defineProps 直接接收父类传来的值、对象、方法等

<template>
    <div>
        <h5>child</h5>

        <!-- child中直接使用，接收的值、对象、方法 -->
        <h5>num: {
    { num }}</h5>
        <button @click="dataMethod(6)">AddFatherNum</button>
        <h5>props对象: {
    { $props }}</h5>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

// 接收到props对象中，可直接使用
defineProps(['num', 'dataMethod'])
</script>

<style scoped>
div {
    width: 100%;
    height: 300px;
    background-color: rgb(244, 214, 174);
    margin-top: 100px;
}
</style>

1.3 效果展示

子组件的props中有父组件给子组件传递的属性

方式2：defineEmits自定义事件（子传父）

子组件通过发送事件的方式触发父组件提供的方法

2.1 父组件代码

<template>
    <div>
        <H4>father</H4>
        <h4>数据 {
    { fatherValue }}</h4>
        <!--在父组件中，给子组件绑定自定义事件：-->
        <Child @send-to-father="changeVal"/>
    </div>
</template>

<script setup lang="ts">
    import Child from './Child.vue';
    import { ref } from 'vue';

    // 直接传给子组件的值/对象
    let fatherValue = ref("father value");

    // 处理子组件的值：子组件可通过该方法修改父组件的值
    let changeVal = (val) => {
        fatherValue.value = val
    }

</script>

<style scoped>
div {
    background-color: rgb(239, 237, 233);
    width: 100%;
    height: 500px;
}
</style>

2.2 子组件代码

<template>
    <div>
        <h5>child</h5>

        <button @click="emitFunc('send-to-father', childValue)">测试<