vue高阶封装之双向绑定(一) 如何实现跨组件 v-model？

为什么封装组件要使用双向绑定？

双向绑定把数据变更的操作隐藏在组件内部，调用者并不会直接感知，业务层无需关心内部实现逻辑，简化大量与业务无关的代码。

 

组件双向绑定应有以下2个特点：

1. 父组件只传输 prop，不定义事件接收。 

2. 由子组件更新传下来的值。

 

本篇文章详解如何用 v-model 实现3种双向绑定

v-model 是什么？

1. v-model 即可以作用在普通表单元素上，又可以作用在组件上。

2. vuejs隐式添加 value 的 prop，子组件通过 props.value 接收值。

3. 子组件通过 this.$emit('input')，改变父组件 v-model 绑定的值。

4. v-model 可以实现双向绑定，无需定义接收事件。

 

为什么v-model可以实现双向绑定？

v-model 其实是一个语法糖，以下是经过 vue 转换后的模板：

<input v-model="message" />

// 转换后：
<input
  v-bind:value="message"
  v-on:input="message=$event.target.value"

1. 添加 v-bind:value