Vue.js功法之练气初期：复习知识点之Vue 组件通信

Vue 组件通信

在Vue.js中，组件通信是构建大型应用程序的关键部分。Vue 组件之间可以通过不同的方式进行通信，其中包括父子组件之间的通信和兄弟组件之间的通信。

为什么使用组件通信？

1. 模块化： 将应用程序拆分为小组件，使代码更易维护。
2. 组件复用： 可以在不同组件之间共享数据和方法，提高组件的复用性。

示例代码

在这个例子中，我们将创建一个父组件和两个子组件，演示通过 props 和事件进行父子组件之间的通信。

父组件 - App.vue

<template>
  <div>
    <h2>父组件</h2>
    <ChildComponentOne :message="parentMessage" @updateMessage="updateParentMessage" />
    <ChildComponentTwo :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponentOne from './components/ChildComponentOne.vue';
import ChildComponentTwo from './components/ChildComponentTwo.vue';

export default {
  data() {
    return {
      parentMessage: '这是来自父组件的消息',
    };
  },
  methods: {
    updateParentMessage(newMessage) {
      this.parentMessage = newMessage;
    },
  },
  components: {
    ChildComponentOne,
    ChildComponentTwo,
  },
};
</script>

子组件一 - ChildComponentOne.vue

<template>
  <div>
    <h3>子组件一</h3>
    <p>{{ message }}</p>
    <button @click="sendMessageToParent">向父组件发送消息</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
  },
  methods: {
    sendMessageToParent() {
      this.$emit('updateMessage', '这是子组件一发送的消息');
    },
  },
};
</script>

子组件二 - ChildComponentTwo.vue

<template>
  <div>
    <h3>子组件二</h3>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
  },
};
</script>