怎么实现v-model:name

v-model:name 是 Vue.js 提供的一个指令，用于实现简单的双向数据绑定。在使用 v-model:name 时，可以将一个表单元素的值绑定到一个组件实例的属性上，也可以将组件实例的属性值绑定到该表单元素上。

要实现 v-model:name，需要在 Vue 组件中定义一个名为 name 的 props，并在组件的 template 中，使用该 props 和一个名为 input 的事件来处理表单元素的输入值。

具体实现如下：

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

<script>
export default {
  props: {
    name: String
  }
}
</script>

在上述代码中，我们定义了一个 name props，并将其值绑定到 input 元素上。同时，我们也监听了 input 事件，并通过 $emit 触发一个名为 input 的事件，将 input 元素的值传递给父组件。这样，在父组件中，就可以使用 v-model:name 指令来双向绑定表单元素的值了。

比如，我们在父组件中可以这样使用：

<template>
  <div>
    <custom-input v-model:name="myName"></custom-input>
    <p>My name is {{ myName }}</p>
  </div>
</template>

<script>
import CustomInput from '@/components/CustomInput'
export default {
  components: {
    CustomInput
  },
  data () {
    return {
      myName: ''
    }
  }
}
</script>

在上述代码中，我们使用了 v-model:name 指令将 myName 的值绑定到 CustomInput 组件的 name props 上。同时，我们也在模板中展示了 myName 的值。这样，当我们在 CustomInput 中输入值时，myName 的值也会同步更新。