Vue组件通讯-深入探讨父子组件通讯、兄弟组件通讯和跨级组件通讯

NineSenz 8/7/2023 Vue.js

在Vue.js中，组件通信是指不同组件之间进行数据传递和交互的过程。在一个复杂的应用程序中，不同的组件可能需要相互通信来实现功能。Vue.js提供了多种方式来实现组件通信，包括父子组件通信、兄弟组件通信和跨级组件通信。

# 父子组件通信

父子组件通信是指从父组件向子组件传递数据或调用子组件的方法。

# Props

Props是父组件向子组件传递数据的一种方式。在父组件中使用子组件时，可以通过props属性传递数据。

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="dataFromParent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataFromParent: 'Hello from parent'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </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
26
27
28
29
30
31
32
33
34

在上面的例子中，父组件通过messageprops将数据传递给子组件，子组件接收并显示该数据。

# 子组件向父组件通信

子组件向父组件通信可以通过在子组件中触发自定义事件来实现。子组件触发事件，父组件监听该事件，并在相应的事件处理函数中处理数据。

<!-- 子组件 -->
<template>
  <div>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child');
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @message="handleMessage"></child-component>
    <p>Message from child: {{ messageFromChild }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromChild: ''
    };
  },
  methods: {
    handleMessage(message) {
      this.messageFromChild = 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

在上面的例子中，子组件通过this.$emit触发了一个名为message的事件，并传递了消息给父组件。父组件监听该事件，并在handleMessage方法中接收并处理消息。

# 兄弟组件通信

兄弟组件通信是指不同层级但共享同一个父组件的两个组件之间进行数据传递和交互。

# 事件总线（Event Bus）

使用事件总线是一种常见的兄弟组件通信方式。它涉及到在Vue实例上创建一个事件中心，用于传递数据和监听事件。

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

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

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from ComponentA');
    }
  }
};
</script>

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

export default {
  data() {
    return {
      messageFromComponentA: ''
    };
  },
  mounted() {
    EventBus.$on('message', (message) => {
      this.messageFromComponentA = 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
26
27
28
29
30
31
32
33
34

在上面的例子中，EventBus作为事件中心被创建，并被导入到两个兄弟组件中。ComponentA通过EventBus.$emit触发名为message的事件，并传递了消息给ComponentB。ComponentB通过EventBus.$on监听message事件，并在事件触发时接收并处理消息。

# 跨级组件通信

跨级组件通信是指不直接关联的两个组件之间进行数据传递和交互。

# 依赖注入（Provide / Inject）

使用依赖注入是一种跨级

组件通信的方式。它涉及到在父组件中通过provide选项提供数据，然后在子组件中通过inject选项注入数据。

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  provide: {
    sharedData: 'Hello from parent'
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ sharedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['sharedData']
};
</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

在上面的例子中，ParentComponent通过provide选项提供了一个名为sharedData的数据给其子组件ChildComponent。ChildComponent通过inject选项注入了sharedData数据，并在模板中显示它。

不同组件通信的方式，包括父子组件通信、兄弟组件通信和跨级组件通信。组件通信是Vue.js中非常重要的功能，它使得我们可以在复杂的组件层级中灵活地传递和处理数据，实现更加强大和灵活的应用程序。

deeplearn

Choose mode