vue事件监听函数on中的this指针域

本文介绍如何利用EventBus实现Vue组件A与B之间的数据通信。通过创建全局事件总线并使用$on和$emit方法,组件A能够监听事件更新其内部状态,而组件B则能触发事件,传递数据给组件A。文章还讨论了使用箭头函数来避免this指针问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用eventBus在两个组件A,B之间通讯:

//定义全局eventBus用于事件传递
var bus = new Vue();
//A组件
var A = Vue.component({
	...
	
	data:{
		dataA:1,
	},
	//在钩子函数中将监听_event事件
	created:function(){
		var this_com = this;
		bus.$on('_event', function(value){
			this_com.dataA = value;
		})
	},
	
	...
})

//B组件
var B = Vue.component({
	...
	data:{
		dataB = 2;
	},
	methods:{
		changeA:function(){
			//触发事件_event
			bus.$emit('_event', this.dataB);
		},
	},
	template:`
		<div v-bind:click="this.changeA"></div>
	`
})

可以看到,在组件A监听事件_event事件的函数前需要提前保存this指针为this_com,因为在监听函数中的this不再指向A组件本身,而是指向事件监听者bus。

另一种方案是用箭头函数代替事件监听函数,因为箭头函数可以将指针域绑定到当前组件

var A = Vue.component({
	...
	
	data:{
		dataA:1,
	},
	//在钩子函数中将监听_event事件
	created:function(){
		var this_com = this;
		bus.$on('_event', value=>{
			this_com.dataA = value;
		})
	},
	
	...
})
Vue.js 中集成 WebSocket 并使用 `self` 关键字时,需要理解几个关键点。 ### 1. **Vue 和 WebSocket 的结合** WebSocket 提供了客户端和服务端之间实时通信的能力。在 Vue 应用中可以创建一个 WebSocket 连接,并通过监听消息事件实现实时数据更新。例如: ```javascript new Vue({ el: '#app', data() { return { message: '' }; }, created() { this.initWebSocket(); }, methods: { initWebSocket() { const ws = new WebSocket('wss://example.com/socket'); // 使用箭头函数绑定 this 到当前 Vue 实例 ws.onmessage = (event) => { this.message = event.data; // 更新 Vue 数据 }; ws.onerror = function(err) { console.error("WebSocket error:", err); }; ws.onclose = () => { console.log("Connection closed"); }; } }, beforeDestroy() { if (this.ws && this.ws.readyState === WebSocket.OPEN) { this.ws.close(); // 组件销毁前关闭连接 } } }); ``` 在这个例子中,我们初始化了一个 WebSocket 连接并在 `onmessage` 回调中处理传入的消息,同时将它赋值给 Vue 的响应式数据属性 `message`。 --- ### 2. **关于 `self` 的使用** 当在非箭头函数内访问 Vue 示例本身的时候(比如普通函数形式),直接使用的 `this` 可能会因为作用域的变化而失效。为了防止这种错误发生,可以在组件加载之初保存对 Vue 实例自身的引用到变量 `self` 上面: ```javascript created() { let self = this; var socket = new WebSocket('ws://localhost:8080'); socket.onopen = function(event){ console.log('Connected to server.'); } socket.onmessage = function(messageEvent){ self.handleIncomingMessage(JSON.parse(messageEvent.data)); } socket.onclose = function(closeEvent){} this.socket = socket; }, methods:{ handleIncomingMessage(data){ console.log(`Received Data from Server : ${data}`); } } ``` 在这里我们将 Vue 对象实例存储到了局部变量 `self`, 然后通过这个变量来调用相应的方法如 `handleIncomingMessage()`. --- ### 3. 推荐做法 尽管可以用传统的 `let self = this` 方案解决上下文丢失的问题,在现代 JavaScript 开发实践中更推荐采用**箭头函数**代替传统匿名函数表达式的写法,因为它不会改变 `this` 指针指向: ```javascript socket.onmessage = (messageEvent) => { this.handleIncomingMessage(JSON.parse(messageEvent.data)); }; ``` 这种方式下无需额外声明 `self` 即可安全地操作 Vue 示例成员方法及属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值