VUE之组件（绑定原生事件、$listeners、$ref）

最新推荐文章于 2024-01-18 16:43:16 发布

别哭别梦别恋别醉别爱他

最新推荐文章于 2024-01-18 16:43:16 发布

阅读量2.3k

点赞数

分类专栏：今日所学日报

本文链接：https://blog.csdn.net/lihua130427/article/details/102819284

版权

本文介绍了Vue中组件如何绑定原生事件，利用.native修饰符简化操作。接着讲解了组件的$listeners属性，使得组件像普通元素一样处理事件。还探讨了vue小技巧，包括$attrs、$listeners在跨级通信中的应用。最后详细阐述了$ref和refs的用法，包括DOM元素和组件上的不同场景。

摘要由CSDN通过智能技术生成

组件绑定原生事件

一个组件的根元素上直接监听一个原生事件代码如下

<!-- html代码 -->
		<div id="demo">
			<btn @click="show"></btn>
		</div>
// vue代码
		Vue.component('btn', {
   
			template: `<div>
				<button @click="childFn">按钮</button>
			           </div>`,
			methods: {
   
				childFn() {
   
					this.$emit('click', 9999)
				}
			}
		})
		var demo = new Vue({
   
			el: "#demo",
			methods:{
   
				show(option){
   
					alert(option)
				}
			}
		})

如上代码，在组件上绑定原生事件还需要自定义事件，过于麻烦。这个时候 .native 原生修饰符就派上用场了，代码如下

<!-- html代码 -->
		<div id="demo">
			<btn @click.native="show"></btn>
		</div>
// vue代码
		Vue.component('btn', {
   
			template: `<div>
				<button>按钮</button>
			           </div>`,
		})
		var demo = new Vue({
   
			el: "#demo",
			methods: {
   
				show() {
   
					alert(6666)
				}
			}
		})

在这里插入图片描述
1、加上.native修饰符后便不再是自定义事件，而是组件的原生事件
2、此时便不再是由子组件向外触发的自定义事件，而是组件的原生点击事件

.native 原生修饰符的官方解释是：监听组件根元素的原生事件！

下面结合.native来做一个小小案例

<!-- html代码 -->
		<div id="demo">
			<btn @blur.native="show"></btn>
		</div>
// vue代码
		Vue.component('btn', {
   
			template: `<input type="text"/>`,
		})
		var demo = new Vue({
   
			el: "#demo",
			methods: {
   
				show() {
   
					console.log(123)
				}
			}
		})

这个小案例是用修饰符.native监听组件***根元素***的原生事件！它的弊端必须是***根元素*** 应用起来是有一定的弊端的但别着急下面有小编在给大家介绍点特别的

组件绑定原生事件和$listeners

监听属性$listeners ：
为了解决这个问题，Vue 提供了一个 $listeners 属性，它是一个对象，里面包含了在这个组件上的所有监听器。
注意：使用.native修饰符的事件，不会体现在$listeners属性上。
分析：
因为child组件的外层根元素是一个label元素，所以默认情况下使用v-on:blur是无效的，所以需要配合$listeners使用，该属性可以把事件的监听指向组件中某个特定的元素
注意：再次强调，如果父级的事件添加了.native修饰符，在$listeners中不会体现出来的

案例代码如下：

<!-- html代码 -->
		<div id="demo">
			<child @click.native="handleChildClick" @blur="handleChildBlur"></child>
		</div>
// vue代码
		Vue.component('btn', {
   
			template: `
				<label>
				姓名：<input placeholder="请输入姓名" type="text"  v-on="inpuntListeners"/>
				</label>`,
			computed: {
   
				inpuntListeners() {
   
					//因为在普通函数的调用下this指向的是win