vue学习80~90（组件自定义事件+全局事件总线+消息订阅与发布+nextTick）

最新推荐文章于 2023-06-04 23:19:19 发布
最新推荐文章于 2023-06-04 23:19:19 发布
阅读量130 收藏
点赞数
分类专栏： vue 文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57809042/article/details/128277642
版权

3.6 组件自定义事件

组件自定义事件是一种组件间通信的方式，适用于：子组件 ===> 父组件

使用场景

A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

绑定自定义事件：

第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>

具体代码

App.vue

<template>
	<div class="app">
		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
		<Student @atguigu="getStudentName"/> 
	</div>
</template>

<script>
	import Student from './components/Student'

	export default {
		name:'App',
		components:{Student},
		data() {
			return {
				msg:'你好啊！',
				studentName:''
			}
		},
		methods: {
			getStudentName(name,...params){
				console.log('App收到了学生名：',name,params)
				this.studentName = name
			}
		}
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

Student.vue

<template>
	<div class="student">
		<button @click="sendStudentlName">把学生名给App</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
			}
		},
		methods: {
			sendStudentlName(){
				//触发Student组件实例身上的atguigu事件
				this.$emit('atguigu',this.name,666,888,900)
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

第二种方式，在父组件中：

使用 this.$refs.xxx.$on() 这样写起来更灵活，比如可以加定时器啥的。

具体代码

App.vue

<template>
	<div class="app">
		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
		<Student ref="student"/>
	</div>
</template>

<script>
	import Student from './components/Student'

	export default {
		name:'App',
		components:{Student},
		data() {
			return {
				studentName:''
			}
		},
		methods: {
			getStudentName(name,...params){
				console.log('App收到了学生名：',name,params)
				this.studentName = name
			},
		},
		mounted() {
			this.$refs.student.$on('atguigu', this.getStudentName) //绑定自定义事件
			// this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
		},
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

Student.vue

<template>
	<div class="student">
		<button @click="sendStudentlName">把学生名给App</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
			}
		},
		methods: {
			sendStudentlName(){
				//触发Student组件实例身上的atguigu事件
				this.$emit('atguigu',this.name,666,888,900)
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

触发自定义事件：this.$emit('atguigu',数据)

使用 this.$emit() 就可以子组件向父组件传数据

解绑自定义事件this.$off('atguigu')

代码

this.$off('atguigu') //解绑一个自定义事件
// this.$off(['atguigu','demo']) //解绑多个自定义事件
// this.$off() //解绑所有的自定义事件

组件上也可以绑定原生DOM事件，需要使用native修饰符。

代码

<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
<Student ref="student" @click.native="show"/>

注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

3.7 全局事件总线

  1. 一种组件间通信的方式，适用于任意组件间通信。

  2. 安装全局事件总线：

    new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
})

  3. 使用事件总线：

    1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

      methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

    2. 提供数据：this.$bus.$emit('xxxx',数据)

  4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

示例代码

School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
        methods: {
            demo(data) {
                console.log('我是School组件，收到了数据',data)
            }
        }
		mounted() {
			// console.log('School',this)
			this.$bus.$on('hello',this.demo)
		},
		beforeDestroy() {
			this.$bus.$off('hello')
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

Student.vue

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		mounted() {
			// console.log('Student',this.x)
		},
		methods: {
			sendStudentName(){
				this.$bus.$emit('hello',this.name)
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

在这里插入图片描述

在这里插入图片描述

3.8 消息订阅与发布

  1. 一种组件间通信的方式，适用于任意组件间通信。

  2. 使用步骤：

    1. 安装pubsub：npm i pubsub-js

    2. 引入: import pubsub from 'pubsub-js'

    3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

      methods:{
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

    4. 提供数据：pubsub.publish('xxx',数据)

    5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

示例代码

订阅消息

School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
		mounted() {
			// console.log('School',this)
			/* this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			}) */
			this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
				console.log(this)
				// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
			})
		},
		beforeDestroy() {
			// this.$bus.$off('hello')
			pubsub.unsubscribe(this.pubId)
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

发布消息

Student.vue

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		mounted() {
			// console.log('Student',this.x)
		},
		methods: {
			sendStudentName(){
				// this.$bus.$emit('hello',this.name)
				pubsub.publish('hello',666)
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

3.9 nextTick

  1. 语法：this.$nextTick(回调函数)
  2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
  3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

具体案例

this.$nextTick(function(）{
	this.$refs.inputTitle.focus()
}
前进的北极熊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件化编码流程，组件自定义事件，全局事件总线，消息订阅与发布
嘤嘤鸭的博客
11-28 543
Vue组件化编码流程，组件自定义事件，全局事件总线，消息订阅与发布
vue-vue2脚手架7-组件的自定义事件
飘然渡沧海的博客
11-15 733
vue-vue2脚手架7-组件的自定义事件 一种组件间通信的方式，适用于：子组件 ===> 父组件 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。 绑定自定义事件： 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/> 第二种方式，在父组件中： <Demo ref="demo"/> ...... mounted()
Vue —— 进阶脚手架（四）（组件的自定义事件）
HuoZhiyan 的博客
05-15 822
组件的自定义事件
Vue2.0 Vue脚手架 组件自定义事件_绑定
yasinawolaopo的博客
12-20 781
Vue2.0 Vue脚手架 Vue自定义事件_绑定
Vue2.0 Vue脚手架 自定义事件_解绑
yasinawolaopo的博客
12-20 164
Vue2.0 Vue脚手架 自定义事件_解绑
前端vue常用模板,学习总结
07-13
组件间的通信可以通过props进行父组件向子组件传递数据，或使用事件总线（Event Bus）或Vuex实现非父子组件间的通信。 三、计算属性与侦听器 Vue的计算属性允许我们基于其他数据计算出新的值，并在依赖的数据发生...
vue基础知识-菜鸟入门
01-03
1. **Vue全局API**: Vue 提供了一套丰富的全局API，如 `Vue.createApp` 用于创建应用实例，`Vue.extend` 用于扩展组件，`Vue.set` 用于向响应式对象添加新属性等。这些工具使得开发者能够更灵活地控制和操作Vue应用...
Vue常见面试真题汇总
最新发布
10-25
4. 组件间的通信可以通过props（父向子）、事件（子向父）、Vuex（全局状态管理）、提供者/注入、非父子组件通信（使用bus、事件总线）等方式实现。Props用于传递数据，事件用于触发回调，Vuex用于集中管理全局状态...
vue面试题、vue前端面试题大全
02-21
- Event Bus：通过全局事件总线实现兄弟组件间的通信。 - Vuex：当需要集中管理复杂应用状态时，使用状态管理库Vuex。 4. Vue生命周期方法： - beforeCreate：实例化后，数据观测和事件配置前。 - created：...
总结前端面试中经典的vue相关题目
10-17
面试中，Vue相关的题目经常出现，考察应聘者对Vue基础知识、组件化、响应式机制、生命周期、Vuex状态管理等方面的理解与应用能力。以下是对一些经典Vue面试题目的详细解析： 1. **Vue的两个核心特性是什么？** - ...
Vue组件之间通信（props、自定义事件、全局事件总线、消息订阅与发布、Vuex）
花生吃花生的学习记录
10-31 1003
Vue组件之间的通信是使用组件中常用的部分。介绍几种常用的组件之间通信方式。 一、使用props配置项 props配置项主要应用与父组件与子组件进行通信。父组件------>子组件 使用方法：在组件标签中绑定属性或者方法。在子组件中使用props配置项来接收父组件传递过来的数据。 父组件中： <template> <div id="app"> <!-- 父组件给子组件传递数据，动态绑定。 --> <!-- 子组件使用props来
vue-自定义事件
xie__jin__cheng的博客
06-12 219
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue-自定义事件</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <
vue 父子组件间如何通过事件进行通信$emit和update:modelValue
xyphf的博客
08-31 2509
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <script src="https://unpkg.com/vue@next"></scr.
Vue中父子组件间如何通过事件进行通信
Ghost__H的博客
05-09 379
1.子组件通过事件和父组件进行通信 由于Vue中单向数据流的概念，父组件传递给子组件的值，子组件只能展示不能修改，所以需要使用事件与父组件通信修改父组件中的值 const app = Vue.createApp({ data(){ return {count:2} }, methods:{ hanldeAddOne(){ this.count +=1;
12道vue高频原理面试题,你能答出几道?
weixin_40664002的博客
01-13 1109
Vue 响应式原理 vue-reactive 核心实现类: Observer : 它的作用是给对象的属性添加 getter 和 setter，用于依赖收集和派发更新 Dep : 用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个 Dep 实例（里面 subs 是 Watcher 实例数组）,当数据有变更时,会通过 dep.notify()通知各个 watcher。 Watche...
vue点击事件改变样式_Vue友们就靠这6个开发技巧了（建议收藏）
weixin_39554021的博客
12-12 5880
前言在平时的开发中，我们用vue可能很久了，但是对于有的新特性或者技巧没有发现，本文就带着大家一起看看常用的vue技巧。(温馨提示：代码片段点击图片阅读体验更佳噢！)一、状态共享随着组件的细化，就会遇到多组件状态共享的情况，Vuex当然可以解决这类问题，不过就像Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是vue.js 2.6新增加的Obse...
Vue 操作摇杆实现
weixin_45412353的博客
06-04 391
最近接了一个展厅类的外包项目，里面有个小机器人需要用摇杆控制移动，在网上找了一下，没有找到想要的组件，于是就自己写了一个。
【Vue组件间通信】 全局事件总线、订阅与发布
yzq0820的博客
08-16 2298
其中小明组件自定义“getName”,需要传递给小红组件，小红组件就需要“getName”来接收，也可以销毁传递。一种组件间通信的方式，适用于任意组件间通信，如今有很多消息订阅与发布的包，在这里只介绍一种，pubsub-js。安装全局事件总线:在入口文件main.js中，给VM添加$bus，任意组件都可以在原型中调用。下面代码所演示的是，小明组件给小红组件姓名“小明”，小红组件给小明组件“年龄”，主要通过。通过订阅与发布的方式，小明组件给小红组件姓名，小红组件给小明组件年龄。创建两个子组件，如下组件，...
Vue中 使用定时器 （setInterval、setTimeout）
热门推荐
用心创作每一篇文章
10-02 2万+
开始的时候创建了一个定时器 setInterval ，时间间隔为2秒，每2秒都会调用一次函数 valChange，从而使 value 的值+1。js中定时器有两种，一个是循环执行 setInterval，另一个是定时执行 setTimeout。顾名思义，循环执行就是设置一个时间间隔，每过一段时间都会循环执行这个方法,直到这个定时器被销毁掉；开始时候创建一个定时器 setTimeout，只在2秒后执行一次方法。定时执行 setTimeout 是设置一个时间，等待时间到达的时候。
vue3 + ts使用defineEmits怎样传递多个自定义事件给父组件
05-17
在 Vue 3 中，可以使用 `defineEmits` 函数来定义组件支持的自定义事件。要传递多个自定义事件给父组件，可以在 `defineEmits` 中定义一个字符串数组，数组中包含所有支持的自定义事件名称。例如： ```typescript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值