第六章：Vue基础---全局事件组件、消息订阅与消息发布（pubsub）、nextTick、过度与动画

最新推荐文章于 2023-01-12 19:27:37 发布
最新推荐文章于 2023-01-12 19:27:37 发布
阅读量147 收藏
点赞数
分类专栏： 前端Vue基础 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/soulcow/article/details/125009034
版权

一：全局事件组件

1. 一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。

2. 安装全局事件总线：

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

3. 使用事件总线：

1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的<span style="color:red">回调留在A组件自身。</span>

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

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

4. 最好在beforeDestroy钩子中，用$off去解绑<span style="color:red">当前组件所用到的</span>事件。

实例：

（1）main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线
	},
})

（2）App.vue

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<School/>
		<Student/>
	</div>
</template>

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

	export default {
		name:'App',
		components:{School,Student},
		data() {
			return {
				msg:'你好啊！',
			}
		}
	}
</script>

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

（3）School.vue

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

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

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

（4）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>

二：消息订阅与消息发布

1.   一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。

2. 使用步骤：

   1. 在终端中安装pubsub：npm i pubsub-js

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

   3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的<span style="color:red">回调留在A组件自身。</span>

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

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

   5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去<span style="color:red">取消订阅。</span>

 实例：

（1）main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
})

（2）App.vue

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<School/>
		<Student/>
	</div>
</template>

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

	export default {
		name:'App',
		components:{School,Student},
		data() {
			return {
				msg:'你好啊！',
			}
		}
	}
</script>

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

（3）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>

（4）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>

三：nextTick

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

四：过度与动画

1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

2. 图示：<img src="XXX" style="width:60%" />

3. 写法：

   （1）准备好样式：

            - 元素进入的样式：
                       1. v-enter：进入的起点
                       2. v-enter-active：进入过程中
                       3. v-enter-to：进入的终点
            - 元素离开的样式：
                       1. v-leave：离开的起点
                       2. v-leave-active：离开过程中
                       3. v-leave-to：离开的终点

   （2）使用<transition>包裹要过度的元素，并配置name属性：

      <transition name="hello">
      	<h1 v-show="isShow">你好啊！</h1>
      </transition>

   （3）备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

 实例：

（1）Test.vue

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

	.hello-enter-active{
		animation: baidu 0.5s linear;
	}

	.hello-leave-active{
		animation: baidu 0.5s linear reverse;
	}

	@keyframes baidu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

（2）Test2.vue

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group name="hello" appear>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">百度！</h1>
		</transition-group>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
	/* 进入的起点、离开的终点 */
	.hello-enter,.hello-leave-to{
		transform: translateX(-100%);
	}
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
	/* 进入的终点、离开的起点 */
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}

</style>

（3）Test3.vue

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group 
			appear
			name="animate__animated animate__bounce" 
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutUp"
		>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">百度！</h1>
		</transition-group>
	</div>
</template>

<script>
	import 'animate.css'   //引入外部库，通过下载来使用成熟的动画
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
	

</style>

（4）App.vue

<template>
	<div>
		<Test/>
		<Test2/>
		<Test3/>
	</div>
</template>

<script>
	import Test from './components/Test'
	import Test2 from './components/Test2'
	import Test3 from './components/Test3'

	export default {
		name:'App',
		components:{Test,Test2,Test3},
	}
</script>

（5）main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

NPFik-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件中展示数据和响应事件
C.
02-24 1374
组件中展示数据和响应事件 在组件中，data需要被定义为一个方法，例如： Vue.component('account', { template: '#tmpl', data() { return { msg: '大家好！' } }, methods:{ login(){ ...
vue——全局事件总线$bus、消息订阅与发布pubsub
h_jQuery的博客
08-27 819
全局事件总线（GlocalEventBus） 1.一种组件间通信的方式，适用于任意组件间通信 2.安装全局事件总线： new Vue({ ... beforeCreate(){ Vue.prototype.$bus=this //安装全局事件总线，$bus就是当前应用的vm }, ... }) 3.使用全局总线： ​ 3.1 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身 methods:{ demo(msg){ console.log(msg
vue笔记（4）全局组件和数据传递
weixin_55770974的博客
03-12 1031
配置插件↓ @后自动显示src中的路径 需直接打开项目 （不含多个项目） "path-autocomplete.extensionOnImport": true, "path-autocomplete.pathMappings": { "@":"${folder}/src" },复制到seeting.js中最上边即可 注册全局组件 main.js中 import left from '@/components/left.vue' Vue.component('left',...
【Vue组件间通信】 全局事件总线、订阅与发布
yzq0820的博客
08-16 2276
其中小明组件自定义“getName”,需要传递给小红组件，小红组件就需要“getName”来接收，也可以销毁传递。一种组件间通信的方式，适用于任意组件间通信，如今有很多消息订阅与发布的包，在这里只介绍一种，pubsub-js。安装全局事件总线:在入口文件main.js中，给VM添加$bus，任意组件都可以在原型中调用。下面代码所演示的是，小明组件给小红组件姓名“小明”，小红组件给小明组件“年龄”，主要通过。通过订阅与发布的方式，小明组件给小红组件姓名，小红组件给小明组件年龄。创建两个子组件，如下组件，...
NextTick的作用
weixin_38083836的博客
02-19 2597
vue中NextTick的作用： Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。 $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM 上个例子 页面效果 点击前 点击按钮之后 可以看到，msg已经变成了Hello world，在changeMsg()方法中，先修改msg的值成为‘Hello world’，然后通过拿到dom的值再依次修改msg1、msg2、m
vue-admin-beautiful-template:vue-admin-beautiful-template基础版
03-21
vue-admin-beautiful（element-ui） 地址 vue-admin-beautiful前端讨论QQ群972435319，1139183756 不论您加或不加，您都可以享受到开源的代码，感谢您的支持和信任，群内部提供vue-admin-beautifu基础版本...
vue-smooth-dnd：用于vue-dnd的Vue包装器组件
02-06
该库由库组成的包装Vue.js组件。演示版在此处查看演示：安装npm i vue-smooth-dnd用法Vue < template> < div> < div xss=removed> < Container xss=removed> < Draggable xss=removed xss=removed>
Vue-axios-pubsub-js：基于vue-axios和利用pubsub-js实现组件通信的前相互作用案例
02-04
本案例是调用GitHub官方提供的API，基于axios，pubsub-js实现一个演示，目的是让自己更加熟悉vue组件化开发思想，和前分离开发中调用接口来获取数据渲染页面。 本文最初发表在博客园，喜欢看博客的同学也可以前往---...
vue-d3-network：使用d3-force绘制网络图的Vue组件
02-06
Vue组件使用d3-force绘制图形网络 演示版 产品特点 SVG渲染 画布渲染 链接和节点选择 svg <->通过CSS共享画布样式 屏幕截图，导出为svg或png（svg渲染器），导出为png（画布渲染器） 触控支持 安装 npm install ...
vue-custom-element：Vue自定义元素-Vue.js的Web组件自定义元素
02-06
目录 演示版 您可以在查看Vue-custom-element... 要使用vue-cli构建Web组件，必须使用以下命令： vue-cli-service build --target lib --name your-component-name src/main.js 注意：命令vue-cli-service build --ta
将全局事件注册为组件
08-10
将全局事件注册为组件
Vue.nextTick 的作用以及大概实现原理
小草莓的博客
07-24 4665
vue核心面试题（nextTick实现原理）_nexttick面试_王三六的博客-CSDN博客。
nextTick的理解和作用
m0_59162559的博客
12-16 4097
场景说明 最近使用Vue全家桶做后台系统的时候，遇到了一个很奇葩的问题：有一个输入框只允许输入数字，当输入其它类型的数据时，输入的内容会被重置为null。为了实现这一功能，使用了一个父组件和子组件。为了方便陈述，这里将业务场景简化，具体代码如下： // 父组件 <template> <Input v-model="form.a" @on-change="onChange"></Input> </template> <script type="java
nextTick 原理及作用
y_l33的博客
01-09 3549
nextTick的原理
$nextTick的作用和使用场景
棋子
12-30 2万+
nextTick的作用和使用场景 vue中的nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick就可以获取数据更新后最新DOM的变化 适用场景： 第一种：有时需要根据数据动态的为页面某些dom元素添加事件，这就要求在dom元素渲染完毕时去设置，但是created与mounted函数执行时一般dom并没有渲染完毕，所以就会出现获取不到，添加不了事件的问题，这回就要...
在Vue组件中获取全局的点击事件
热门推荐
xjun0812的博客
03-17 2万+
使用场景：在Vue组件中点击某元素之外的地方移除该元素需求：如上图所示，“用户列表”页面有三个Vue组件组成，分别是“菜单组件”，“导航组件”和“列表组件”。其中“列表组件”中包含一个“下拉菜单”，当我们点击“下拉菜单”以外的区域隐藏下拉菜单。解决方法一：出现“下拉菜单”的同时，建一个透明的遮罩层，然后只有“下拉菜单”可以点，点击遮罩层就隐藏。缺点：z-index层数要控制好，还有就是如果点击其他...
nextTick的作用和使用场景
weixin_47224517的博客
05-28 1513
nextTick的作用和使用场景？ vue中的nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick就可以获取数据更新后最新DOM的变化 注意：数据更新和DOM更新不是同步，是异步的 使用场景 例如：改变dom元素，针对第三方插件的集成 <div class="boo"> <div ref="box">{{msg}}</div> <button @click="getMsg">获取消息</button
vue全局组件的使用和对应事件的处理
weixin_44748596的博客
10-09 488
1，通过全局组件，向各个子组件里面创建各自需要的按钮 全局组件又叫公共组件的声明：Vue.component(a,b)参数a是自定义全局组件的名称，参数b是options对象 （1），全局组件的dom元素里添加<slot></slot>标签并给全局组件命名 slot作为承载分发内容的出口 Vue.component('vbtn',{ // slot作为承载分发内容的出口 ...
nextTick的作用及使用场景
Alone_Endeavor的博客
01-12 1606
nextTick的作用及使用场景
vue-webtopo-svgeditor 组件添加事件
最新发布
01-13
vue-webtopo-svgeditor 是一个用于编辑 SVG 图形的 Vue 组件，它提供了丰富的事件管理功能，可以让用户在编辑 SVG 图形时实现各种交互效果。要添加事件，首先需要引入 vue-webtopo-svgeditor 组件，并在需要使用的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值