vue3 实现v-model:msg

Vue 3 实现 v-model:msg 的步骤如下：

1. 在组件中定义一个 msg 属性，并在 template 中的 input 标签中使用 v-model 绑定该属性：

<template>
  <div>
    <input v-model="msg" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: ""
      }
    }
  }
</script>

2. 添加一个 model 选项，并在其中指定 prop 和 event 属性来实现双向绑定：

<template>
  <div>
    <input v-model="msg" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: ""
      }
    },
    model: {
      prop: "msg",
      event: "update"
    }
  }
</script>

3. 在 input 标签中添加 @input 监听器来触发更新事件：

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

<script>
  export default {
    props: {
      msg: {
        type: String,
        default: ""
      }
    },
    model: {
      prop: "msg",
      event: "update"
    }
  }
</script>

现在，你可以在父组件中使用 v-model:msg 来实现与子组件中 msg 属性的双向绑定。