《对话品牌》—广西南宁隆生达发电力科技有限公司

示例（演示地址）

以下是Vue3中使用v-model实现组件的双向数据绑定的示例代码：

<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput,
  },
  setup() {
    const message = ref('');

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

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>

<script>
import { defineProps } from 'vue';

export default {
  props: {
    modelValue: {
      type: String,
      required: true,
    },
  },
  emits: ['update:modelValue'],
};
</script>

• Vue3.js官方文档 - 组件v-model（.sync）
• Vue3.js官方文档 - 组件v-model 演示地址