Vue3 组件通信-JXin的博客

温馨提示

该文章距离上次更新已经过去了 638 天，文章内容可能已经过时。

使用 props 和 emit
provide 和 inject
ref
使用事件总线（Event Bus）

使用 props 和 emit

和 Vue 2 一样，Vue 3 仍然使用 props 从父组件向子组件传递数据，使用 emit 从子组件向父组件发送事件。

<template>
  <ChildComponent :message="parentMessage" @update="handleUpdate" />
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const parentMessage = ref('来自父组件的消息');
    
    const handleUpdate = (data) => {
      console.log('来自子组件的数据:', data);
    };
    
    return {
      parentMessage,
      handleUpdate
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<template>
  <div>
    {{ message }}
    <button @click="sendUpdate">发送更新</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: ['message'],
  setup(props, { emit }) {
    const sendUpdate = () => {
      emit('update', '来自子组件的消息');
    };

    return {
      sendUpdate
    };
  }
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

provide 和 inject

Vue 3 中的 provide 和 inject 是用于祖孙组件间通信的方法，适用于深层次组件树。

祖组件

<template>
  <ChildComponent />
</template>

<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    provide('message', '来自祖组件的消息');
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

孙组件

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    
    return {
      message
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

ref

在 Vue 3 中，ref 依然可以用于访问子组件实例或 DOM 元素。

父组件

<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const child = ref(null);
    
    const callChildMethod = () => {
      child.value.childMethod();
    };
    
    return {
      child,
      callChildMethod
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

子组件

<template>
  <div>子组件内容</div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const childMethod = () => {
      console.log('子组件的方法被调用了');
    };

    return {
      childMethod
    };
  }
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

使用事件总线（Event Bus）

虽然在 Vue 3 中不推荐使用事件总线，但它依然可以作为一种通信方式。通常使用 Vue 的 mitt 库来实现。

npm install mitt

Event Bus

// event-bus.js
import mitt from 'mitt';
export const EventBus = mitt();

1
2
3

组件A

<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
import { EventBus } from './event-bus';

export default {
  setup() {
    const sendMessage = () => {
      EventBus.emit('message', '来自组件 A 的消息');
    };

    return {
      sendMessage
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

组件B

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { EventBus } from './event-bus';

export default {
  setup() {
    const message = ref('');
    
    onMounted(() => {
      EventBus.on('message', (msg) => {
        message.value = msg;
      });
    });
    
    return {
      message
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24