您现在的位置是:首页 > 技术教程 正文

【学Vue就跟玩一样】如何使用vue中的消息订阅与发布,如何使用vue实现动画效果

admin 阅读: 2024-03-31
后台-插件-广告管理-内容页头部广告(手机)

一,消息订阅与发布

1.什么是消息订阅与发布

消息订阅与发布是一种组件间通信的方式,适用于任意组件间通信。能更好的实现组件间通信(消息订阅与发布就像是送报员一样。好比小a向报社订阅了一份报纸,然后在报社留下了自己的信息,然后送报员就按着小a留下的信息找到了小a所在的地方将报纸送给了他)

2.如何使用pubsub

1.首先我们要安装pubsub,打开vscode→打开终端→输入一下安装命令(也可以在cmd进行安装)

npm i pubsub-js

2.引入(在需要使用pubsub的组件内引入即可)

import pubsub from ' pubsub-js'

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

methods(){demo(data){.....}mounted() {this.pid = pubsub. subscribe( 'xx'this . demo) }

我们应该先找到想要接受数据的组件,配置一个mounted的配置项,进行消息的订阅subscribe这个单词也有订阅的意思,也就是下面这个组件就是小a的角色,他要订阅一份报纸,然后留下了自己的住址'hello',再利用回调获取数据,这里的msgName,data分别是订阅名和数据(也就是小a的家庭住址和送报员所携带的报纸)

  1. import pubsub from "pubsub-js";
  2. export default {
  3. name: "School",
  4. data() {
  5. return {
  6. name: "山鱼特效屋",
  7. address: "南京北城区"
  8. };
  9. },
  10. mounted() {
  11. this.pubId = pubsub.subscribe("hello", (msgName, data) => {
  12. console.log("该消息已经发布", msgName, data);
  13. });
  14. },
  15. //使用完之后销毁该绑定事件避免后期错误使用
  16. beforeDestroy() {
  17. pubsub.unsubscribe();
  18. }
  19. };
  1. 提供数据

pubsub. publish( ' xxx' ,数据)

publish方法的第一个参数'hello'为订阅名,第二个参(this.name)为想要传递的数据。

  1. import pubsub from "pubsub-js";
  2. export default {
  3. name: "Student",
  4. data() {
  5. return {
  6. name: "张三",
  7. sex: "男"
  8. };
  9. },
  10. // 配置一个methods项
  11. methods: {
  12. snedStudentName() {
  13. // 选择给谁提供数据
  14. pubsub.publish("hello", this.name);
  15. }
  16. }
  17. };
  1. 最好在beforeDestroy钩子中去取消订阅。

beforeDestroy() {pubsub.unsubscribe();}

3.nextTick

1.语法:this. $nextTick(回调函数)

2.作用:放在$nextTick 当中的操作不会立即执行,而是等数据更新,DOM更新完成之后再执行

3.使用时机:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。

二,Vue封装的过度与动画

1.作用

在插入,更新,移除DOM元素时,在合适的时候给元素添加样式类名。

2.写法

准备好样式:元素进入的样式

  1. <template>
  2. <div>
  3. <button @click="isShow = !isShow">隐藏展示button>
  4. <transition name="hidden" appear>
  5. <h1 v-show="isShow">隐藏展示h1>
  6. transition>
  7. div>
  8. template>
  9. <script>
  10. export default {
  11. name: "Test",
  12. data() {
  13. return {
  14. isShow: true
  15. };
  16. }
  17. };
  18. script>
  19. <style scoped>
  20. h1 {
  21. background-color: orange;
  22. }
  23. .hidden-enter-active {
  24. animation: shanyu 1s;
  25. }
  26. .hidden-leave-active {
  27. animation: shanyu 1s reverse;
  28. }
  29. @keyframes shanyu {
  30. from {
  31. transform: translateX(-100%);
  32. }
  33. to {
  34. transform: translateX(0px);
  35. }
  36. }
  37. style>

1.样式

需要先有这个animate.css哦

npm i animate.css

1.v-enter:进入的起点

2.v-enter-active:进入过程中

3.v-enter-to:进入的终点

  1. <template>
  2. <div>
  3. <button @click="isShow = !isShow">隐藏展示button>
  4. <transition-group name="shanyu" appear>
  5. <h1 v-show="isShow" key = '1'>隐藏展示h1>
  6. <h1 v-show="isShow" key = '2'>隐藏展示h1>
  7. transition-group>
  8. div>
  9. template>
  10. <script>
  11. export default {
  12. name: "Test2",
  13. data() {
  14. return {
  15. isShow: true
  16. };
  17. }
  18. };
  19. script>
  20. <style scoped>
  21. h1 {
  22. background-color: rgb(139, 37, 255);
  23. }
  24. /* 进入的起点,离开的起点 */
  25. .shanyu-enter,
  26. .shanyu-leave-to {
  27. transform: translateX(-100%);
  28. }
  29. .shanyu-enter-active,.shanyu-leave-active{
  30. transition: .5s linear;
  31. }
  32. /* 进入的终点离开的终点 */
  33. .shanyu-enter-to,
  34. .shanyu-leave {
  35. transform: translateX(0);
  36. }
  37. style>

元素离开的样式:

1.V-leave:离开的起点

2.V-leave-active:离开过程中

3.V-leave-to:离开的终点

4.使用包裹要过度的元素,并配置name属性

  1. 你好啊! h1>
  2. transition>

备注:若有多个元素需要过度,则需要使用: , 且每个元素都要指定key值。

  1. <transition-group name="shanyu" appear>
  2. <h1 v-show="isShow" key = '1'>隐藏展示h1>
  3. <h1 v-show="isShow" key = '2'>隐藏展示h1>
  4. transition-group>

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索