乱 - Vue .native $listeners $attrs - 笔记

.native 修饰符

.native会将组件事件绑定到 根元素上 , 且该事件不会加入$listeners

	<aaa @click="console.log('aa')"></aaa>
	Vue.component('aaa',{
		template:`<div>aa
			<input type="button" @click="$emit('click')" value="点击">
		</div>`
	});

点aa无效,因为div没有点击事件,点击按钮有效

	<aaa @click.native="console.log('aa')"></aaa>
	
	Vue.component('aaa',{
		template:`<div>aa
			<input type="button" @click="$emit('click')" value="点击">
		</div>`
	});

点击aa和按钮都会触发事件

$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用

	<aaa @a="" @b="" @c.native=""></aaa>
	
	Vue.component('aaa',{
		template:`<div>
			<input type="button" @click="console.log($listeners)" value="点击">
			<!--有a,b事件,但是c也可以通过$emit触发,因为是本组件的事件-->
			<bbb v-on="$listeners" @d=""></bbb>
		</div>`
	});
	
	Vue.component('bbb',{
		template:`<div>
			<input type="button" @click="console.log($listeners)" value="点击">
			<!--有a和b和d事件,并且可以通过$emit触发-->
		</div>`
	});

$attrs

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

	<aaa  a="" b="" ></aaa>
	
	Vue.component('aaa',{
		props:['a'],
		template:`<div>
			<input type="button" @click="console.log($attrs)" value="点击">
			<!--有b , 没有a,因为a已经被props声明了-->
			<bbb v-bind="$attrs" c=""></bbb>
		</div>`
	});
	Vue.component('bbb',{
		template:`<div>
			<input type="button"  @click="console.log($attrs)" value="点击">
			<!--有b和c-->
		</div>`
	});