Vue的高阶用法在element-ui中的应用（持续更新）

1、el-input组件中v-model的实现

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

相当于

<el-input 
    v-bind:value="input" 
    v-on:input="input = argument[0]" 
    placeholder="请输入内容"
>
</el-input> 

或者

<el-input 
    :value="input" 
    :input="input = argument[0]" 
    placeholder="请输入内容"
>
</el-input> 

或者

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

methods: {
    inputOn(value) {
        this.input = value;
    }
}

el-input组件内部实现

  <template>
     <input
         @input="handleInput"
     >
     </input>
  </template>
  <script>
   export default {
    name: 'ElInput',
    props: {
        value: [String, Number]
    },
    methods: {
      handleInput(event) {
        this.$emit('input', event.target.value);
      }  
    }
  }
  </script>

2、el-input组件中的原生属性和自定义属性的实现

el-input组件中有很多原生属性，比如

在组件内部的props中并没有接收这些原生属性，那是怎么渲染上去的呢？

<el-input 
    placeholder="请输入内容" 
    a="AaBB" 
    maxlength="10"
>
</el-input>

vm.$attrs可以帮我们解决

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

确实我们在源码中看到了

3、使用v-on="$listeners"获取父作用域中的(不含 .native 修饰器的) v-on 事件监听器

ElImage组件中的应用