vue3setup父组件修改子组件的值

在 Vue 3 中，父组件可以通过 props 将数据传递给子组件，并且子组件可以通过 $emit 方法将数据的变更事件传递给父组件。

首先，在父组件中，你需要定义一个数据，并将它作为 prop 传递给子组件。例如，假设你在父组件中有一个名为 "message" 的数据：

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

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

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

然后，在子组件中，你可以通过 props 接收父组件传递的数据，并在需要时触发一个自定义的事件来通知父组件更新数据。例如，假设你在子组件中有一个名为 "message" 的 prop，并且在点击按钮时触发一个更新事件：

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

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

当子组件中的按钮被点击时，它会触发 "update-message" 事件，并将新的消息作为参数传递给父组件的 "updateMessage" 方法。在父组件的 "updateMessage" 方法中，你可以将新的消息赋值给父组件的 "message" 数据，从而实现父组件修改子组件的值。

这样，当子组件中的按钮被点击时，父组件中的 "message" 数据会被更新，并且相应地重新渲染子组件。