Vue之model属性

这个属性通常不太会注意到，但有的时候用起来比较舒服，下面就来具体说说这个属性。

model

官网解释：允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

简单来讲就是将组件实现数据双向绑定的效果，需要注意的是自定义组件字眼表明其主要的使用场景是在组件内部，后面的那一大段是说明缘由的。

举个例子：

为了获取input输入框的值，在Vue.js中我们需要使用v-model指令绑定当前标签上，如下，

<input v-model="name" />

其实v-model在Vue.js中的实现是语法糖，上面的代码等价于<input :value="name" @input="$event.target.value"/>, Vue.js会监听用户输入事件，不同的控件自动监听对应的事件，比如：select -> value 作为 prop、change 作为事件、text/textarea -> value property 和 input 事件等，通过v-model实现数据的双向绑定。

当然，大多的时候我们还是需要实现自己业务的组件，这个时候如果也想简单的实现双向绑定，能够使用v-model，就需要借助model这个属性了。

比如说你有个组件如下：

Vue.component('my-comp', {
  model: {
    event: 'update'
  },
  props: 
    value: [String, Number]
  },
  // ...
  methods: {
    func (val) {
        this.$emit('update', val)
    }
  }
})

你在使用的时候就可以这么用：
<my-comp v-model="fd"></my-comp>
上面的代码就等价于

<my-comp
    v-bind:value="fd"
    @update="val => {fd = val}"
  />

如果你不想使用value做props，这个时候你可以这么写：

props: {
  selected: [String, number]
}
model: {
  prop: 'selected',
  event: 'update'
}

其他的代码不用更改，这个也是有问题的，只能使用v-model得到子组件的传参，父组件内绑定的值更新后，子组件没更新ui，所以这个时候还需要对子组件的props进行监听处理。