vue组件封装 -- 双向绑定 v-model的本质

引言

当我们在封装vue组件的时候，经常会想要父组件与子组件有一个双向绑定数据v-model，例如elementUI 的 input

但是，子组件和父组件是不能直接使用 v-model的，那么应该怎么做呢？

一、v-model的本质

所谓 v-model就是一个语法糖，实际上，它是由 v-bind(:)和 @input两个合在一起的一个缩写

也就是说：v-model 可以分解为：

1. v-bind
2. @input

例如 :

等于：

handleInput (e) {
	this.value = e.target.value
}

二、实现父子组件的双向绑定

原理：

1. 分解v-model，变成两个语法
2. 利用父子组件的通信

父组件使用

子组件获取