如何在vue自定义组件中使用 v-model指令
【每一个技术点都值得优写】系列1期。
一、前言
近日,有人在群里提问,如何实现在自定义的vue组件中使用v-model,遂有此文。 起先觉得挺简单,事实也挺简单,但似乎又没那么简单。因为深谈这涉及指令原理、数据绑定实现原理。
技术点提前知
要想在自定义组件中使用v-model,使用上其实就简单几步,这里以自定义input组件为例。
关键步骤
1.props的使用。在自定义的vue文件中,声明父组件要向子组件传递的prop属性,例如
props: {
// 接收string和number类型的值,
myValue: [String, Number],
},
注意,myValue这个属性名称是可以自定义的,但[String, Number]不能写成字符串["String","Number"],因为此时它们是构造器,是js的全局api。
2.$emit的使用。用于向上派发事件,在自定义组件中触发,例如:
methods: {
changeInput ($event) {
this.$emit('myInput', $event.target.value)
},
}
向上派发myInput事件,这样model监听myInput才有意义: 当输入字符时触发input事件,进而派发触发自定义的myInput事件, 然后model监听myInput,就实现了数据绑定。必须注意,这里的派发事件名“myInput”必须和model中的event的值相同。
PS: 通过watch监听 input标签的值,然后$emit派发事件,和通过@input派发事件具有一样的效果。只要能达到通信的效果即可,手段是多样的。
3.关键的model。model是允许vue自定义组件使用v-model的关键,虽然有时我们不显性的使用它,也不影响我们在自定义组件中使用v-model指令,这只是因为被设置默认值。而有的时候,显示的使用,并自定义model的prop和event会有益。这是官网关于model的介绍:
允许一个自定义组件在使用
v-model
时定制 prop 和 event。默认情况下,一个组件上的v-model
会把value
用作 prop 且把input
用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用value
prop 来达到不同的目的。使用model
选项可以回避这些情况产生的冲突。----本段摘自vue官网
自定义model使用示例
model: {
prop: 'myValue', // 默认是value
event: 'myInput', // 默认是input
},
当我们使用model的默认值的时候value作prop,input作event时,可以省略不写model。
4.v-model的使用。在父组件中使用自定义组件,例如
<custom-model v-model="myValue"></custom-model>
这样写效果也一样:
<custom-model :my-value="myValue"></custom-model>
二、在自定义的vue组件中使用v-model
1.效果演示图
2.自定义组件代码示例
<template>
<!-- 自定义组件中使用v-mode指令 -->
<input type="search" @input="changeInput" data-myValue="">
</template>
<script>
export default {
name: 'CustomModel',
// 当我们使用model的默认值的时候value作prop,input作event时,可以省略不写model。
model: {
prop: 'myValue', // 默认是value
event: 'myInput', // 默认是input
},
props: {
// 接收string和number类型的值,
// 注意不能是写成字符串["String","Number"],因为此时它们是构造器,是全局变量
myValue: [String, Number],
},
methods: {
changeInput ($event) {
// 向上派发myInput事件,这样model监听myInput才有意义:当输入字符时触发input事件,
// 进而派发触发自定义的myInput事件,然后model监听myInput,就实现了数据绑定
this.$emit('myInput', $event.target.value)
},
}
}
</script>
3.在父组件使用自定义组件
<template>
<div class="home">
<h3>输入的实时内容:{{ myValue }}</h3>
<custom-model v-model="myValue"></custom-model>
</div>
</template>
<script>
import CustomModel from './CustomModel'
export default {
name: 'Home',
components: {
CustomModel,
},
data () {
return {
myValue: ''
}
},
}
</script>
三、优写时刻
本段是【每一个技术点都值得优写】系列特写段落。 是一种拓展补充,就像数学试卷最后的附加题,读者可以自由选择阅读。
v-model简要补充。 v-model是vue中常用且重要的指令,能起到数据双向绑定的作用。 从MVVM(Model-View-ViewModel)架构的角度理解v-model的数据绑定, 它在需要view层和model层实现交互互动的时,非常有用。 例如,在view层输入数据,会及时更新该数据到model层, 而更新model层中的数据,也会被及时更新到view层, 这种更新业务逻辑是ViewModel在起作用。
先来看下数据双向绑定的效果
那么vue是如何实现数据绑定的?
①object类型数据实现数据可观测,是通过Object的defineProperty()实现的。
②array类型数据实现数据可观测,是通过拦截重写数据的7个可操作数组且会改变数组自身的方法实现的。
③依赖是一种表示数据和其使用者的关系,依赖管理器会为每一个依赖创建watcher实例。
④数据变化被观测到后,会通过代表依赖的watcher实例,调用update()方法,通知视图更新。
⑤vue提供了set和delete两个全局API,弥补部分新增和删除数据手法,无法被观测,进而影响数据响应式实现的不足。
更详细的请看本人掘金文章 Vue源码解读:02变化侦测篇