在vue官网2.2.0的api新增的model选项,可以帮助我们实现父子同步通信。
1. model
model的类型定义如下,它有两个属性prop,event.
一个组件上的v-model
会把 value
用作 prop
把 input
用作 event
- 类型:
{ prop?: string, event?: string }
model: {
prop: ‘value1’, // prop说:我要在该组件被使用(被父组件调用)时,v-model的值绑定给value1
event: ‘change’ // event说:我emit(触发)change的时候,参数的值就是父组件v-model收到的值。
},
- 例子
Vue.component('my-checkbox', { //这是一个名字为my-checkbox的组件
model: {
prop: 'checked',
event: 'change'
},
props: {
value: String,
checked: { //因为在model中使用了prop: 'checked',所以这里必须显示的声明这个变量
type: Number,
default: 0
}
},
// ...
})
使用这个组件
<my-checkbox v-model="foo" value="some value"></my-checkbox>
上面代码相当于:
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
prop属性的作用:通过v-model传的值来更新prop的value1
event属性的作用:通过将新变化的value1的值更新给v-model的数据
2. 父子组件使用v-model双向同步通信
子组件
import Vue from 'vue'
const component = {
// 使用model对象,定义它的两个属性,就可以在父组件通过v-model实现父子组件双向数据绑定
model: {
prop: 'value1', // prop说:我要将value1作为该组件被使用(被父组件调用)时,v-model能取到的值
event: 'change' // event说:我emit(触发)change的时候,参数的值就是父组件v-model收到的值。
},
props: {
value1: String
},
template: `
<div>
<span>这里显示的是子组件input的value1值</span>
<input type="text" @input="handleInput" :value = "value1">
</div>
`,
methods: {
handleInput (e) {
this.$emit('change', e.target.value)
}
}
}
父组件
new Vue({
el: '#root',
data () {
return {
myvalue: '123'
}
},
components: {
CompOne: component
},
template: `
<div>
<comp-one v-model="myvalue"></comp-one> //使用子组件
<p>这里显示的是父组件的myvalue值:{{myvalue}}</p>
</div>
`
})
上面的<comp-one>组件实际相当于:
<comp-one
:value1 = myvalue,
@change = function: val => { myvalue = val}
>
</comp-one>
1. 实际上prop是通过v-model让父组件给子组件传递数据,改变子组件数据
2. 而event是给父组件传递数据,改变父组件数据
以此实现双向数据绑定
运行结果:
image.png
作者:klmhly
链接:https://www.jianshu.com/p/908c6868aa9f
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。