vue组件封装 -- 双向绑定 v-model的本质
引言
当我们在封装vue组件的时候，经常会想要父组件与子组件有一个双向绑定数据v-model，例如elementUI 的 input
但是，子组件和父组件是不能直接使用 v-model的，那么应该怎么做呢？
一、v-model的本质
所谓 v-model就是一个语法糖，实际上，它是由 v-bind(:)和 @input两个合在一起的一个缩写
也就是说：v-model 可以分解为：
- v-bind
- @input
例如 :
<input type="text" v-model="value">
等于：
<input type="text" :value="value" @input="handleInput">
handleInput (e) {
this.value = e.target.value
}
二、实现父子组件的双向绑定
原理：
- 分解v-model，变成两个语法
- 利用父子组件的通信
父组件使用
<dh-input v-model="value"></dh-input>
子组件获取
<template>
<div class="dh-input">
<input :value="value"
@input="handleInput">
</div>
</template>
<script>
export default {
name: DhInput,
props: {
value: null // 使用v-bind 获取传来的数据
},
methods: {
handleInput (e) {
this.$emit(input, e.target.value) // 使用子传父，发送数据
}
}
}
</script>
