vue自定义组件model属性

Vue.js的自定义组件可以使用v-model指令来创建双向数据绑定。v-model实际上是一个语法糖，它会自动监听子组件的input事件并将值传递给父组件。如果要在自定义组件中使用v-model，需要定义一个props属性和一个emit方法。

props属性用于接收父组件传递的值，而emit方法用于向父组件发送值的更新。例如，如果要为一个自定义组件添加v-model属性，可以按照以下步骤进行操作：

1. 在组件的props属性中定义一个value属性，用于接收父组件传递的值。

2. 为组件添加一个input事件监听器，当组件的值发生变化时，调用emit方法将新值传递给父组件。

3. 在父组件中使用v-model指令来绑定组件的值和父组件的数据。

下面是一个简单的例子：

// 子组件
Vue.component('my-input', {
  props: ['value'],
  template: `
    <input :value="value" @input="$emit('input', $event.target.value)">
  `
})

// 父组件
new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

在父组件中，可以使用v-model指令将message属性与子组件的值进行双向绑定：

<my-input v-model="message"></my-input>

这样，当子组件的值发生变化时，message属性也会自动更新。