Vue 2.4.0新增inheritAttrs，attrs属性

 1. 封装一个a-input组件：inheritAttrs:默认为true，即绑定在其他组件调用a-input时，非prop传递的值（除了class和style，因为class和input会被直接挂载在最外层<div class="a-input"></div>标签上），如 type="password"  autocomplete="off"  placeholder="请输入密码"将被挂载在封装组件的最外层<div class="a-input"></div>标签上，即渲染的结果是<div class="a-input" type="password"  autocomplete="off"  placeholder="请输入密码"></div>，而v-bind='$attrs'可以将其挂载在指定的元素上，即<input  v-bind='$attrs'/>渲染的结果是<input  type="password"  autocomplete="off"  placeholder="请输入密码"/>，如果同时设置inheritAttrs:true和<input  v-bind='$attrs'/> 会同时挂载在input和<div class="a-input"></div>标签上。

<template>
    <div class="a-input">
        <input  v-bind='$attrs' :value='value' @input='onInput'/>
    </div>
</template>
<script>
    export default{
        name:"AInput",
        inheritAttrs:false, //为true时，默认 直接挂在在父组件<a-input type="text" placeholder="请输入"></a-input>
                            // 的type="text" placeholder="请输入"属性会被挂载在<div class="a-input"/>上   
        props:{
          value:[String],  
        },
        methods:{
            onInput(e){
                this.$emit('input',e.target.vlaue);
            }
        }  
    }
</script>
<style lang="less" scoped>

</style>

2. 在其他组件用调用a-input：

<a-input type="password" v-model="form.user" autocomplete="off"  placeholder="请输入密码"></a-input>

---

拓展：v-model相当于 :

<input :value='value' @input='onInput' />
props:{
   value:[String],  
},
methods:{
    onInput(e){
       this.$emit('input',e.target.vlaue);
    }
 }  

 在Vue2.4版本之后，.sync修饰符实现双向绑定：即可以通过.sync实现子组件修改父组件传递给子组件的值

<!--在父组件值传值给子组件时，子组件修改父组件传递过来的值-->
<!--1.以前的写法-->
<!--父组件中传值lists给子组件-->
<child :lists="lists" @listsChange="listsChange"></child>
listsChange(newLists){
  this.lists=newLists;  
}
<!--子组件中，修改父组件传递过来的list值-->
this.$emit('listsChange',newLists);


<!--2.现在用.sync的写法-->
<!--父组件中传值lists给子组件-->
<child :lists.sync="lists" ></child>
<!--子组件中，修改父组件传递过来的list值-->
this.$emit('update:lists', newLists);

---