Vue 组件通信-JXin的博客

温馨提示

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

Props
$emit
Vuex
Provide/Inject
$parent 和 $children
ref
事件总线（Event Bus）

在 Vue.js 中，组件是构建用户界面的基础模块。随着应用规模的增长，组件之间的通信变得至关重要。本文将深入探讨 Vue 组件通信的几种常用方法，包括 props、事件、Vuex 和 provide/inject 等。

Props

最常见的通信方式是通过 props 将数据从父组件传递到子组件。

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: '来自父组件的消息'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['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
25

$emit

子组件可以通过 $emit 触发事件将数据传递给父组件。

<!-- 父组件 -->
<template>
  <ChildComponent @update="handleUpdate" />
</template>

<script>
export default {
  methods: {
    handleUpdate(data) {
      console.log('来自子组件的数据:', data);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="sendUpdate">点击我</button>
</template>

<script>
export default {
  methods: {
    sendUpdate() {
      this.$emit('update', '来自子组件的消息');
    }
  }
};
</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
28
29

Vuex

当需要在多个组件之间共享状态时，可以使用Vuex来进行组件间通信。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: '来自 Vuex 的消息'
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    setMessage({ commit }, newMessage) {
      commit('updateMessage', newMessage);
    }
  }
});

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

<!-- 组件 -->
<template>
  <div>{{ message }}</div>
  <button @click="updateMessage">更新消息</button>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['setMessage']),
    updateMessage() {
      this.setMessage('来自组件的消息');
    }
  }
};
</script>

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

Provide/Inject

当需要在更深层次的组件中传递数据时，可以使用 provide/inject。

<!-- 祖组件 -->
<template>
  <ChildComponent />
</template>

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

<!-- 孙组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['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
25

$parent 和 $children

组件实例的 $parent 和 $children 属性允许你在组件之间直接访问父组件或子组件。这些属性通常不推荐用于复杂的组件通信，因为它们会导致紧耦合和代码不易维护，但在某些简单的场景下可以使用。

父组件访问子组件

<template>
  <div>
    <ChildComponent v-for="n in 3" :key="n" ref="children" :index="n" />
    <button @click="callChildMethods">调用所有子组件的方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    callChildMethods() {
      this.$children.forEach(child => {
        child.childMethod();
      });
    }
  }
};
</script>

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

子组件访问父组件

<!-- 子组件 -->
<template>
  <button @click="callParentMethod">调用父组件方法</button>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$parent.parentMethod();
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
export default {
  methods: {
    parentMethod() {
      console.log('父组件的方法被调用了');
    }
  }
};
</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
28
29
30
31

ref

ref 属性允许你在父组件中直接引用子组件实例或 DOM 元素。这是与 $parent 和 $children 类似的一种直接访问方法，但更具可控性。

<!-- 父组件 -->
<template>
  <ChildComponent ref="child" />
  <button @click="callChild">调用子组件方法</button>
</template>

<script>
export default {
  methods: {
    callChild() {
      this.$refs.child.childMethod();
    }
  }
};
</script>

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

<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件的方法被调用了');
    }
  }
};
</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
28
29
30

事件总线（Event Bus）

事件总线是一种发布/订阅模式，用于在不相关的组件之间进行通信。虽然 Vue.js 2.x 中比较流行，但在 Vue 3 中，推荐使用更为现代的状态管理解决方案（如 Vuex 或 Composition API）。

例如：

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

1
2
3

<!-- 组件 A -->
<template>
  <button @click="sendMessage">发送消息</button>
</template>

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

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', '来自组件 A 的消息');
    }
  }
};
</script>

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

<!-- 组件 B -->
<template>
  <div>{{ message }}</div>
</template>

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

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message', (msg) => {
      this.message = msg;
    });
  }
};
</script>

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