VUE3父子组件传值

在Vue 3中，父组件可以通过属性传递数据给子组件。以下是一个简单的示例：

父组件代码：

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

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

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

子组件代码（ChildComponent.vue）：

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

<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  methods: {
    sendMessage() {
      const newMessage = 'Hello from child component';
      this.$emit('updateMessage', newMessage);
    },
  },
};
</script>

在上面的示例中，父组件通过`:message="message"`将`message`属性的值传递给子组件。子组件通过`$emit`方法触发`updateMessage`事件，并且将新的消息作为参数传递给父组件。父组件通过在子组件标签上使用`@updateMessage`监听该事件，并在相应的方法中更新`message`的值。

这样，父组件和子组件之间就可以进行数据传递了。