实现类似 v-model 的功能
实现数据双向绑定
在组件内,添加 props;组件修改数据时 emit 事件,并把改的新值传出去;从而实现数据的双向绑定。
import Vue from 'vue'
const component = {
props: ['value'],
template: `
<div>
<input type="text" @input="handleInput" :value="value"/>
</div>
`,
methods: {
handleInput (e) {
this.$emit('input', e.target.value)
}
}
}
new Vue({
components: {
CompOne: component
},
el: '#root',
data () {
return {
value: '123'
}
},
template: `
<div>
<comp-one
:value="value"
@input="value = arguments[0]"
>
</comp-one>
</div>
`
})
复制代码
直接使用 v-model
与上述例子,效果相同。
v-model 相当于给组件增加了 一个 props 属性以及一个事件监听,实现了双向绑定的逻辑。本质上与上个例子一样。
template: `
<div>
<comp-one v-model="value"></comp-one>
</div>
`
复制代码
自定义 v-model
当组件使用 value 实现了一个功能,但又需要实现双向绑定,这时就会有冲突。
通过 定义组件时的 model 选项
,从而实现了自定义组件 v-model 功能。
类似编辑器的功能,可能用 v-model 的方式会更好,可以通过这种方式使用。
import Vue from 'vue'
const component = {
model: {
prop: 'value1',
event: 'change'
},
props: ['value1'],
template: `
<div>
<input type="text" @input="handleInput" :value="value1"/>
</div>
`,
methods: {
handleInput (e) {
this.$emit('change', e.target.value)
}
}
}
new Vue({
components: {
CompOne: component
},
el: '#root',
data () {
return {
value: '123'
}
},
template: `
<div>
<comp-one v-model="value"></comp-one>
</div>
`
})
复制代码