vue 子组件怎么和父组件通信

Vue 子组件可以通过使用 props 属性来与父组件进行通信。props 属性允许父组件向子组件传递数据。在父组件中，可以通过给子组件添加属性的方式来传递数据。子组件可以在自己的模板中使用这些属性。

下面是一个示例：

在父组件中：

<template>
  <div>
    <ChildComponent :message="message" @update-message="updateMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello from parent!',
    };
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    },
  },
};
</script>

在子组件中：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('update-message', 'New message from child!');
    },
  },
};
</script>

在上述示例中，父组件通过 `:message` 将 `message` 数据传递给子组件。子组件接收到 `message` 属性后，可以在模板中直接使用它。子组件通过 `this.$emit('update-message', 'New message from child!')` 触发了一个自定义事件 `update-message`，并传递了新的消息作为参数。父组件通过 `@update-message="updateMessage"` 监听到子组件触发的事件，并调用 `updateMessage` 方法来更新 `message` 数据。这样就实现了子组件与父组件之间的通信。