v-model

实际上是一个语法糖,在作为表单使用的时候,可以理解成为双向绑定,即改变input的值那么input上所绑定的值也跟着改变,反过来修改数据则会更新input的值,使用该属性会自动忽略本身的value、checked、selected等属性,转而依赖vue的数据结构。

在实际场景中,checkbox、radio、select、input等都可以使用,可谓是很方便,但是若将该属性应用到自定义组件上就有些不同了,当将该属性应用到自定义组件后需要自行去做对应的处理

<custom-input v-model="searchText"></custom-input>
// 等价于
<custom-input
 v-bind:value="searchText"
 v-on:input="searchText = $event">
</custom-input>

为了在自定义组件上让其正常工作,需要做两件事情:

1. 将value绑定到value的prop上
2. 再其input事件触发的时候主动调用this.$emit('input', value)来更新状态,将新的值使用自定义input事件抛出

这里提到这个知识点主要是为了强调我们在封装自定义组件的时候可能会用到v-model这个属性,其实际原理我们完全可以用$on来进行模拟。

另外当给一个组件绑定了一个自定义事件的时候,其实这个事件是在子组件触发,只是父组件那边通过v-on监听了该事件,那么我们也可以在子组件里面使用$on来监听自己$emit触发的事件。

这样是一个思路拓展,如果内部事件触发这个方法不是它自己调用,而是其它组件调用的呢