Vue高级特性之自定义v-model

Vue高级特性之自定义v-model

在实际开发中，我们除了用到直接在 input 标签上使用的 v-model 指令外，还有很多场景需要我们自定义一个 v-model ，接下来探索一下在 Vue 中如何自定义一个 v-model 。

目录结构

下图为使用 Vue-cli 创建的基本的脚手架目录结构，我们使用到的文件有 HelloWorld.vue 和 App.vue：

App.vue

在这里，我们使用 <h4> 标签来展示 HelloWorld 组件中实时响应的内容，在组件 HelloWorld 标签上使用 v-model=name ，并在下面的 data 中返回 name 的值。

HelloWorld.vue

在 HelloWorld 组件中：

• 我们定义了一个 <input type="text" /> 的输入框
• 在 <script> 标签中定义 props ，值写任一变量例如 content ，指明类型 String 。
• 与 props 同级定义 model ，写入 prop 属性，值为刚才在 props 中定义的变量，并写入 event 属性，值为一个自定义事件名例如取名为 change 。
• 在 <input /> 标签上动态绑定输入框的 value 属性值为 content ，并且监听 input 输入事件同时当输入时出发自定义事件名 change ，第二个参数写 $event.target.value 。

展示

到此为止，我们就已经完成了一个自定义的 v-model，让我们运行项目试试吧。