本文共 1312 字，大约阅读时间需要 4 分钟。

v-model在自定义组件中的应用与实现

在Vue.js开发中，v-model是一个强大的双向绑定工具。它在普通DOM标签中直接使用时，能够实现数据与视图的双向更新。而在自定义组件中，实现双向绑定则需要借助model选项来完成。理解这一特性，有助于深入掌握v-model的工作原理。

1.1 输入文本框（）

在自定义组件中，输入字段的双向绑定需要通过v-model和model选项来实现。

• 初始加载时，组件内的< span>标签会显示vue实例的属性值。例如，初始值为{ name: 'bbb' }，则会显示"bbb"。
• 在子组件中，输入值会与子组件的data属性值绑定。例如，子组件初始化时data返回{ value: 'aaa' }，则会显示"aaa"。
• 当用户输入时，输入事件会触发，传递当前输入值。通过$emit事件分发机制，调用名为"input-value"的事件回调函数，将输入值作为参数传递。

值得注意的是，model选项会根据指定的事件类型，自动更新组件的属性值，并同步到vue实例中。例如，$emit('input-value', $event.target.value) 会将当前输入值赋值给vue实例的name属性。

< div id="test-modelComponent-input" >  < span>name: { { name }}   < input-text v-model="name" placeholder="edit me" />
   

1.2 多行文本框（）</h2>

自定义组件中的textarea双向绑定与input框类似。

• 与input框相同，textarea的双向绑定通过v-model实现。
• 组件内部同样通过model选项定义prop和事件，确保数据同步。

< div id="test-modelComponent-textarea" >  < p style="white-space: pre-line;">{ { message }} 
      < input-textarea v-model="message" placeholder="edit me" />
    

1.3 复选框（）

复选框的双向绑定与单选框类似，但需要注意的是：

• 绑定的属性是checked属性，而不是value。
• 事件类型为change。
• 传递的参数是$event.target.checked的布尔值。

< div id="test-modelComponent-checkbox" >  < input-checkbox v-model="checked" />  < span>{ { checked }} 
   
   

1.4 v-model的内部实现

v-model在自定义组件中通过以下方式实现双向绑定：

• 定义了prop属性，用于接收父组件的值。
• 定义了event事件，用于触发数据更新。
• 通过$emit事件分发机制，将输入事件转化为父组件的属性更新。

以上是v-model在自定义组件中的实现方法，通过model选项实现双向绑定，确保组件与父组件之间的数据同步。