$attrs和$listeners及用法

$attrs: 包含了父作用域中不作为prop的绑定属性(class和style除外)。

$listeners： 包含父级作用域不含.native修饰符的v-on事件监听器

封装一个elementUI的el-input称为myInput

$attrs接收多个绑定属性

<template>
	<div>
		<el-input v-model="inputVal" :diabled = "disabled"></el-input>
	</div>
</template>
<script>
export default{
	props:{
		value: {
			type: String,
			default: '
		},
		disabled:{
			type: Boolean,
			default:false
		}
	}，
// 注意 myInput中的input表单中v-model不能直接绑定value
// 因为直接绑定value的话，我们在操作input的时候会触发@input="value= $event.target.value" 改动了value的值。
// 而vue是不允许子组件直接改动父组件的数据。否则报错
// Avoid mutating a prop directly since ...
	computed:{
		inputVal:{
			get(){
				return this.value
			},
			set(val){
				this.$emit('input',val)
			}
		}
	}
}
</script>

在父组件中使用 myInput

<myInput v-model="myvalue" :disable='disabled'>
<script>
data(){
	return {
		myValue: '初始值',
		disabled: false
	}
}
</script>

要封装这么一个组件，自然要用到el-input上的属性，如disabled。首先，我们需要在父组件中绑定，在子组件中用props接受。那么出现一个问题，el-input组件共有二十多个属性，难道要写二十多个prop来接收吗？显然，这样做是繁琐且可读性差的。

显然，我们可以利用$attrs接收父组件的绑定属性。并且还可以使用 v-bind="attrs"继续向下传递绑定属性。

//myInput.vue
<template>
<div>
<el-input v-model="input" v=bind="$attrs"></el-input>
</div>
</template>
<script>
export default{
// 注意：这里要使用inheritAttrs：false避免传过来的属性作为DOM结构的attribute渲染
/** 在使用绑定属性一般是作为DOM Props属性，如果在子组件中没有props接收，那么传过来的绑定属性就会被作为attribute渲染到dom上。
* 如果定义了一个未接收的type属性，那么input框的类别可能就改变了，
*因此，为了防止将这个外部属性作为attribute,	加上inheritAttrs: false
*/
	inheritAttrs: false,
	props:{
		value:{
			type:String,
			default: ''
		}
	},
	computed:{
		inputVal:{
			get(){
				return this.value
			},
			set(val){
				this.$emit('input',val)
			}
		}
	}
}
</script>

$listeners接收多个绑定事件

//父组件
<myInput v-model="inputVal" @blur="myBlur" />
<script>
	data(){
		return{ inputVal: '初始值'}
	},
	methods:{
		myBlur(){
		....
		}
	}
</script>

//myInput.vue
<template>
<div>
<el-input v-model="inputVal" v=bind="$attrs" v-on="$listeners"></el-input>
</div>
</template>
<script>
export default{
	inheritAttrs: false,
	props:{
		value:{
			type:String,
			default: ''
		}
	},
	computed:{
		inputVal:{
			get(){
				return this.value
			},
			set(val){
				this.$emit('input',val)
			}
		}
	}
}
</script>

参考

『前端工程』—— 封装Vue第三方组件的三板斧
Vue中的$attrs和inheritAttrs