38、如何实现跨组件 v-model（双向数据绑定）？

https://blog.csdn.net/qq_39624107/article/details/91452098

 

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

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

 

组件双向绑定应有以下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 转换后的模板：

1.  
   <input v-model="message" />
2.  
    
3.  
   // 转换后：
4.  
   <input
5.  
   v-bind:value="message"
6.  
   v-on:input="message=$event.target.value"

1. 添加 v-bind:value。

2. 添加 v-on:input 的自定义事件。

动态绑定了 input 的 value 指向了 messgae 变量，并且在触发 input 事件的时候去动态把 message 设置为目标值，这样实际上就完成了数据双向绑定。

双向绑定其实就是普通单向绑定和事件组合来完成的。

 

 

基本模型：父组件 - 当前组件（转发参数，高阶组件） - 子组件

父级组件不用过多解释，使用 v-model 传参。

1.  
   <template>
2.  
   <div>
3.  
   <!-- $attrs & observer -->
4.  
   <BaseInputAttrs v-model="pModel"/> <br>
5.  
    
6.  
   <!-- watch & data & emit('input') -->
7.  
   <BaseInputWatch v-model="pModel"/> <br>
8.  
    
9.  
   <!-- computed & emit('input') -->
10.  
    <BaseInputComputed v-model="pModel"/>
11.  
    </div>
12.  
    </template>
13.  
     
14.  
    <script>
15.  
    export default {
16.  
    data () {
17.  
    return {
18.  
    pModel: 'v-model双向绑定',
19.  
    }
20.  
    },
21.  
    }
22.  
    </script>

 

 

下面是三种<当前组件>的 v-model 实现方案

 

方案1：

1.  
   <template>
2.  
   <input type="text" v-bind="$attrs" v-on="$listeners">
3.  
   </template>

 

$attr: 向 子组件 传递，当前组件 没有接收的，父组件传递下来的 prop 。

$listeners: 向父组件传递，当前组件没有接收的，子组件抛出的自定义事件。

 

这样实现后，发现输入后会变成一个 [object InputEvent] 的事件对象。

是因为 v-on="input" 是内置事件，vue 判断 当前组件 的 tag 是 'input' 类的表单元素，才会关联 value。

当前组件 经过封装后，tag 已经改变，父组件实际处理的是 this.$emit('input', el) 的传参，el 就是 [object InputEvent] 表单对象。

 

解决方案：拦截内置的 input 事件，改变引用，向 父组件 传递最终值，如下。

1.  
   <template>
2.  
   <input type="text" v-bind="$attrs" @input="observerInput">
3.  
   </template>
4.  
    
5.  
   <script>
6.  
   export default {
7.  
   methods: {
8.  
   // 拦截内置事件
9.  
   observerInput (el) {
10.  
    this.$emit('input', el.target.value)
11.  
    },
12.  
    },
13.  
    }
14.  
    </script>

 

 

 

方案2：watch监听 和 过渡属性

分别监听 父组件和子组件，通过过渡属性 model 存储值

1.  
   <template>
2.  
   <input type="text" v-model="model">
3.  
   </template>
4.  
    
5.  
   <script>
6.  
   export default {
7.  
   props: {
8.  
   value: {
9.  
   type: String,
10.  
    default: '',
11.  
    },
12.  
    },
13.  
     
14.  
    data () {
15.  
    return {
16.  
    model: '',
17.  
    }
18.  
    },
19.  
     
20.  
    watch: {
21.  
    value: {
22.  
    immediate: true,
23.  
    handler (newVal) {
24.  
    this.model = newVal
25.  
    },
26.  
    },
27.  
     
28.  
    model (newVal) {
29.  
    this.$emit('input', newVal)
30.  
    },
31.  
    },
32.  
    }
33.  
    </script>

 

 

 

方案3：计算属性 setter getter

尤雨溪的方案 setter 去拦截修改

1.  
   <template>
2.  
   <input type="text" v-model="model">
3.  
   </template>
4.  
    
5.  
   <script>
6.  
   export default {
7.  
   props: {
8.  
   value: {
9.  
   type: String,
10.  
    default: '',
11.  
    },
12.  
    },
13.  
     
14.  
    computed: {
15.  
    model: {
16.  
    get () {
17.  
    return this.value
18.  
    },
19.  
    set (newVal) {
20.  
    this.$emit('input', newVal)
21.  
    },
22.  
    },
23.  
    },
24.  
    }
25.  
    </script>

 

 

 

总结：三种方案都是通过 this.$emit('input') 修改最终的值，这是封装组件的关键所在：统一数据源。