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

Question

比如一个文本框

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

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

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

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

Answer 1

看这两段就好了

<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>

Answer 2

在vue中，input绑定v-model即可实现双向绑定，参见vue官方文档处理用户输入部分。