vue.js - ElementUI 是如何实现父子组件的双向绑定的?

问题描述

问 题

比如一个文本框

<el-input v-model="input" placeholder="请输入内容"></el-input>

父容器中的input会跟子组件绑定起来

按照正常的步骤 应该向子组件传入一个v-on的方法 子组件进行调用才会改变父容器的data属性

翻了下源码 没看出什么端倪 哪路老哥给指点一下思路谢谢

解决方案

看这两段就好了

<input
  :value="currentValue"
  @input="handleInput"
>

method:

handleInput(event) {
    const value = event.target.value;
    this.$emit('input', value);
    this.setCurrentValue(value);
    this.$emit('change', value);
},

其实就是emit了input事件，并将更改后的值传出去。文档如下

文档中已经提到v-model等效于：

<el-input :value="input" @input="value => { input = value }" placeholder="请输入内容"></el-input>

这篇关于vue.js - ElementUI 是如何实现父子组件的双向绑定的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！