Vue 3 Setup: 父子组件之间传递数据

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

在父组件中，可以使用 props 属性来定义要传递给子组件的值。例如：

<template>
  <div>
    <child-component :message='parentMessage'></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

在子组件中，可以使用 props 属性来接收父组件传递的值。例如：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

这样，父组件就可以将值传递给子组件并在子组件中显示。

如果需要在子组件中修改父组件的值，可以使用 emit 方法来触发事件。例如：

在父组件中：

<template>
  <div>
    <child-component :message='parentMessage' @update-message='updateParentMessage'></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  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'],
  methods: {
    updateMessage() {
      this.$emit('update-message', 'New message from child');
    }
  }
};
</script>

这样，子组件中的 updateMessage 方法将触发 update-message 事件，父组件中的 updateParentMessage 方法将被调用，并且可以更新父组件的值。

这就是在 Vue 3 中实现父子组件之间值传递的方式。