vue3.2子父组件传值

在Vue 3.2中，可以使用props和emit来实现子父组件之间的传值。

首先，在父组件中，通过props将数据传递给子组件。在子组件中，使用接收到的props数据进行相应的操作。

父组件示例：

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

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

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

子组件示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

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

在父组件中，我们使用`:message="parentMessage"`将`parentMessage`作为props传递给子组件。子组件中通过props接收到父组件传递的`message`，并显示在模板中。

子组件中的按钮点击事件`updateMessage`会触发`this.$emit('update-message', newMessage)`，将新的消息通过自定义事件`update-message`传递给父组件。

在父组件中，我们定义了`updateParentMessage`方法来接收子组件传递的新消息，并更新`parentMessage`的值。

这样，就实现了父组件向子组件传递数据，并且子组件可以通过自定义事件将新的数据传递给父组件。