vue3 setup封装组件 子组件怎么双向绑定父组件的值

在 Vue3 中，可以通过 `emit` 函数实现子组件向父组件的双向绑定。具体步骤如下：

1. 在子组件中使用 `props` 接收父组件传递的值。

// 子组件 MyComponent.vue

<template>
  <input v-model="childValue" />
</template>

<script>
export default {
  props: ['parentValue'],
  setup(props) {
    const childValue = ref(props.parentValue);

    // 监听子组件的值变化，通过 emit 触发父组件的事件
    watch(childValue, (newValue) => {
      emit('update:parentValue', newValue);
    });

    return {
      childValue,
    };
  },
};
</script>

2. 在父组件中使用 `v-bind` 将父组件的值传递给子组件，并通过 `v-on` 监听子组件的值变化。

// 父组件 ParentComponent.vue

<template>
  <div>
    <p>父组件的值：{{ parentValue }}</p>
    <MyComponent v-bind:parentValue="parentValue" v-on:update:parentValue="parentValue = $event" />
  </div>
</template>

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

export default {
  components: {
    MyComponent,
  },
  setup() {
    const parentValue = ref('');

    return {
      parentValue,
    };
  },
};
</script>

这样，当子组件中的值发生变化时，`update:parentValue` 事件会被触发，从而将子组件的值传递到父组件中更新父组件的值。