父子组件props双向绑定

在Vue3中，可以通过props和自定义事件来实现父组件的双向数据绑定。

1. 基础父子组件传值：使用props和自定义事件来实现父组件向子组件传值[^1]。

// 子组件
<template>
  <div>
    <input v-model="value" @input="$emit('update:value', value)">
  </div>
</template>

<script>
export default {
  props: ['value'],
}
</script>

// 父组件
<template>
  <div>
    <ChildComponent :value="message" @update:value="message = $event"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: '',
    };
  },
}
</script>

2. 父子组件双向数据绑定：使用v-model指令、props和emit来实现父子组件的双向数据绑定。

// 子组件
<template>
  <div>
    <input v-model="value">
  </div>
</template>

<script>
export default {
  props: ['value'],
  emits: ['update:value'],
}
</script>

// 父组件
<template>
  <div>
    <ChildComponent v-model="message"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: '',
    };
  },
}
</script>