Vue2-全局事件总线、消息的订阅与发布、TodoList的编辑功能、$nextTick、动画与过渡

news2025/1/16 1:46:04

🥔：高度自律即自由

更多Vue知识请点击——Vue.js

VUE2-Day9

    • 全局事件总线
      • 1、安装全局事件总线
      • 2、使用事件总线
        • （1）接收数据
        • （2）提供数据
        • （3）组件销毁前最好解绑
      • 3、TodoList中的孙传父
        • （1）首先在main.js中安装全局事件总线
        • （2）在App.vue中绑定全局自定义事件，并使用之前写好的回调
        • （3）Item中触发事件，并把数据id传过去
    • 消息的订阅与发布
      • （1）使用消息的订阅与发布
      • （2）TodoList案例使用消息的订阅与发布
    • TodoList的编辑功能
      • 1、整体思路
      • 2、给标签添加事件
      • 3、点击编辑按钮切换span为input
      • 4、失去焦点传数据
      • 5、App收数据
    • $nextTick
    • 动画与过渡
      • 进入离开动画三种写法

全局事件总线

一种组件间通信的方式，适用于任意组件间通信。通俗理解就是一个定义在所有组件之外的公共嘎达，这个嘎达可以有vm或vc上的同款$on、$off、$emit，也可以让所有组件都访问到。要想实现这个事情，只能在Vue.prototype上添加一个属性，值是vm或vc

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q3OYNFD4-1692378989491)(D:\wxf\前端学习笔记\vue2+vue3\笔记图片\全局事件总线.png)]

vm.$emit( event, arg ) //触发当前实例上的事件,arg是传递给父组件的参数
vm.$on( event, fn )    //监听event事件后运行 fn
$off(type, fn)		   //注销消息方法 type:消息名称	fn:消息回调函数

1、安装全局事件总线

安装全局事件总线可以用vc也可以用vm，写在main.js里面

  • 用vc的话这么写：
const Demo = Vue.extend({});
const d = new Demo();
Vue.prototype.$bus = d;
  • 用vm的话这么写（我们通常用vm）：
new Vue({
  el: '#app',
  render: (h) => h(App),
  //放这个函数里，是因为模板还未解析，这个函数在自定义事件定义之前，是不会报错滴
  beforeCreate() {
    Vue.prototype.$bus = this //安装全局事件总线
  },
})

在这里我们使用vm安装全局事件总线。

2、使用事件总线

（1）接收数据

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

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

（2）提供数据

任意一个组件，都可以给上面说的A组件传数据

  methods:{
    sendStudentName(){
        this.$bus.$emit('xxxx',this.name)
    }
}

（3）组件销毁前最好解绑

最好在beforeDestroy钩子中，用`$of去解绑当前组件所用到的事件。
因为接收数据的组件A中定义的回调函数和自定义事件是绑定的，而这个用来接收数据的组件实例A都销毁了，回调函数也没了，那这个自定义事件也就没用了，你留着会污染全局环境。

beforeDestroy() {
    this.$bus.$off('hello')
}

3、TodoList中的孙传父

之前我们孙传父都是父亲传给儿子函数，儿子传给孙子函数，然后孙子再调用函数传值，很麻烦，但是现在我们可以用全局事件总线实现孙子给父亲传数据。此处只展示修改部分，记得把之前方法的相关代码删掉或注释掉。

（1）首先在main.js中安装全局事件总线

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

（2）在App.vue中绑定全局自定义事件，并使用之前写好的回调

mounted() {
    //挂载完成后给全局事件总线添加事件
    this.$bus.$on('changeTodo', this.changeTodo);
    this.$bus.$on('deleteTodo', this.deleteTodo);
},
beforeDestroy() {
   //最好在销毁前解绑
    this.$bus.$off(['changeTodo', 'deleteTodo']);
},

（3）Item中触发事件，并把数据id传过去

handleChange(id) {
    //触发全局事件总线中的事件
    this.$bus.$emit('changeTodo', id);
},
handleDelete(id) {
    if (confirm('确定要删除吗?'))  //点确定是true,取消是false
        this.$bus.$emit('deleteTodo', id);
}

消息的订阅与发布

（1）使用消息的订阅与发布

消息的订阅与发布用的不多，和全局事件总线写法差不多，但是全局事件总线更好，因为是在Vue身上操作，但是这个的话要引入第三方库，库有很多，比如pubsub-js

安装pubsub：npm i pubsub-js
引入：import pubsub from 'pubsub-js

接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
接收两个参数，第一个是消息名字，第二个是传过来的数据

methods(){
  demo(msgName,data){......}
}
......
mounted() {
  //订阅消息
  this.pubsubId = pubsub.subscribe('xxx',this.demo) 
},   
beforeDestroy() {
   //销毁时取消订阅
   pubsub.unsubscribe(this.pubsubId); 
},

提供数据：

methods: {
    sendStudentName() {
        // this.$bus.$emit('hello', this.name);
        //发布消息并传数据
        pubsub.publish('hello', this.name); 
    }
},

可以对比一下前面的全局事件总线写法，个人认为写法差别不大。

可以尝试把TodoList案例里孙传父使用全局事件总线的写法改成使用消息订阅与发布试试。

（2）TodoList案例使用消息的订阅与发布

这里把**deleteTodo改成消息订阅与发布，changeTodo依旧使用全局事件总线**，大家可以仔细对比他们的区别。

  • App.vue(订阅消息/接收数据)：
 mounted() {
    //挂载完成后给全局事件总线添加事件
    this.$bus.$on('changeTodo', this.changeTodo)
 
    // this.$bus.$on('deleteTodo', this.deleteTodo)
    //deleteTodo换一种方法 用订阅消息写
    this.pubsubIs = pubsub.subscribe('deleteTodo', this.deleteTodo)
  },
  beforeDestroy() {
    //最好在销毁前解绑
    // this.$bus.$off(['changeTodo', 'deleteTodo'])
      
    //使用全局事件总线解绑
    this.$bus.$off('changeTodo')

    //deleteTodo换一种方法 用订阅消息解绑
    pubsub.unsubscribe(this.pubsubId)
  },

这里别忘了这个subscribe里的回调，接收两个参数，第一个是消息名，后面才是数据，所以deleTodo方法得加个参数

//虽然msgName没用上，但是如果不加就会把id当第一个参数，id就变成msgName，所以这里必须要加，或者直接拿一个下划线_占位也行
deleteTodo(msgName, id) {
			this.todos = this.todos.filter(todo => todo.id !== id);
        },
  • Item.vue（发布消息/提供数据）
handleChange(id) {
    //使用全局事件总线
    //触发全局事件总线中的事件
    this.$bus.$emit('changeTodo', id);
},
handleDelete(id) {
    //confirm点确定是true,取消是false
    if (confirm('确定要删除吗?')) 
        //使用消息订阅与发布发布消息
        pubsub.publish('deleteTodo', id);  //发布消息
}

TodoList的编辑功能

1、整体思路

首先得有一个按钮，点击之后出现input框，框里是todo.title，而且原来的span要隐藏。然后修改完之后，失去焦点会自动更新数据，并且span出现，input框隐藏。
除此之外还有个细节，那就是点击编辑要自动获取焦点，要不然会有一个小问题（点击编辑，然后突然不想改了，还得手动点一下input，再点下别的地方，才会变回span）

想实现span和input的来回切换，就要给todo添加新的属性，用来标识这个变换，这里起名叫isEdit

所以大致思路：给标签添加事件 => 点击编辑按钮切换span为input => 失去焦点传数据 => App收数据 => 解决焦点bug

2、给标签添加事件

（1）isEdit一上来是没有的，所以todo.isEdit = false，再加上默认上来显示的是span，所以span加个v-show=“!todo.isEdit”，input加个v-show=“todo.isEdit” ，button加v-show="!todo.isEdit"是因为我们一般编辑时，这个按钮应该消失才对，所以和span一致

（2）由于props接过来的数据不能改，所以使用单向数据绑定:value=“todo.title”

（3）ref=“inputTitle” 是为了方便后面拿到input元素然后操作它写的（nextTick）

（4）@blur="handleBlur(todo, $event)"是失去焦点时触发的事件，用来给App传值

<span v-show="!todo.isEdit">{{ todo.title }}</span>
<input 
type="text" 
v-show="todo.isEdit" 
:value="todo.title" 
ref="inputTitle" 
@blur="handleBlur(todo, $event)">
 <button class="btn btn-edit" @click="handleEdit(todo)" v-show="!todo.isEdit">编辑</button>

给这个编辑按钮加个样式：

.btn-edit {
  color: #fff;
  background-color: rgb(13, 166, 13);
  border: 1px solid green;
  margin-right: 5px;
}

.btn-edit:hover {
  color: #fff;
  background-color: green;
}

3、点击编辑按钮切换span为input

点击编辑给todo追加属性，用来切换span为input。这里考虑到给todo追加属性的问题，如果想要让Vue监测到这个属性，那么必须使用$set来添加isEdit，且默认值为true（因为编辑的时候显示的是input啊，想想v-show="todo.isEdit"）。

但是这里边有点儿问题，如果已经添加过了isEdit，那每次点击编辑按钮，都会添加一次isEdit属性，这样是不太好的，所以要加个判断，添加过了就改成true，没添加过就添加个true

   handleEdit(todo) {
        if (todo.isEdit !== undefined) {
            console.log('todo里有isEdit属性了')
            todo.isEdit = true;
        } else {
            console.log('todo里没有isEdit属性')
            this.$set(todo, 'isEdit', true);
        }
        this.$nextTick(function () {
            this.$refs.inputTitle.focus();
        })
    },

4、失去焦点传数据

失去焦点首先input得变回span，然后使用全局事件总线传值，传值一定要传当前input框的value值，因为这才是你修改后的值，使用事件对象获取。（当然，别忘了id也要传）

handleBlur(todo, e) {
    todo.isEdit = false;
    if (!e.target.value.trim()) return alert('值不能为空！');  //trim去掉空格
    this.$bus.$emit('updateTodo', todo.id, e.target.value);
}

5、App收数据

把input框里你写的东西拿过来，给对应的todo.title

//6.实现编辑todo
methods: {
		......
        updateTodo(id, title) {
            this.todos.forEach((todo) => {
                if (todo.id === id) { todo.title = title }
            });
        }
   }
mounted() {
	......
    //实现编辑功能，接收数据
    this.$bus.$on('updateTodo', this.editTodo);
},
beforeDestroy() {
    //最好在销毁前解绑
    this.$bus.$off('updateTodo');
},

$nextTick

1、语法：this.$nextTick(回调函数)
2、作用：在下一次 DOM 更新结束，v-for循环结束后执行其指定的回调。
3、什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时（如input自动获取焦点），要在nextTick所指定的回调函数中执行。

4、比如刚才点击编辑后，input框没法自动获取焦点，那么我就得先点一下，再点别处儿才能切换回去，如果直接this.$refs.inputTitle.focus();不行，因为这个函数虽然动了isEdit的值，但是模板重新解析也得等这个函数走完啊，那input还没创建出来呢，就focus了，肯定是不行滴。
有个办法就是用异步，也可以解决，但是更好的办法是$nextTick

动画与过渡

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

请添加图片描述

2、写法：

准备好样式：

元素进入的样式：
v-enter：进入的起点
v-enter-active：进入过程中
v-enter-to：进入的终点

元素离开的样式：
v-leave：离开的起点
v-leave-active：离开过程中
v-leave-to：离开的终点

使用<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: pink;
}

.hello-enter-active {
  animation: potato 1s;
}
.hello-leave-active {
  animation: potato 1s reverse;
}

@keyframes potato {
  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: 'Test2',
  data() {
    return {
      isShow: true,
    }
  },
}
</script>

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

/* 进入的起点,离开的终点 */
.hello-enter,
.hello-leave-to {
  transform: translateX(-100%);
}
/* 进入的终点,离开的起点 */
.hello-enter-to,
.hello-leave {
  transform: translateX(0);
}
.hello-enter-active,
.hello-leave-active {
  transition: 0.5s linear;
}
</style>
  • 3、集成第三方动画
<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group
      name="animate__animated animate__bounce"
      appear
      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: 'Test3',
  data() {
    return {
      isShow: true,
    }
  },
}
</script>

<style scoped>
h1 {
  background-color: orange;
}
</style>
  • App.vue
<template>
  <div id="App">
    <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>
  • 效果：（从上往下分别是Test、Test2、Test3效果）
    请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/896831.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Jenkins改造—nginx配置鉴权

Jenkins改造—nginx配置鉴权

先kill掉8082的端口进程 netstat -natp | grep 8082 kill 10256 1、下载nginx nginx安装 EPEL 仓库中有 Nginx 的安装包。如果你还没有安装过 EPEL&#xff0c;可以通过运行下面的命令来完成安装 sudo yum install epel-release 输入以下命令来安装 Nginx sudo yum inst…
阅读更多...
Flutter 测试小结

Flutter 测试小结

Flutter 项目结构 pubspec.yaml 类似于 RN 的 package.json&#xff0c;该文件分别在最外层及 example 中有&#xff0c;更新该文件后&#xff0c;需要执行的 Pub get lib 目录下的 dart 文件为 Flutter 插件封装后的接口源码&#xff0c;方便在其他 dart 文件中调用 example 目…
阅读更多...
vue 如何适配 web 夜间模式、暗黑模式、黑色主题 prefers-color-scheme: dark

vue 如何适配 web 夜间模式、暗黑模式、黑色主题 prefers-color-scheme: dark

vue 如何适配 web 夜间模式、暗黑模式、黑色主题 prefers-color-scheme: dark 一、暗黑模式越来越普遍 自苹果推出暗黑模式之后&#xff0c;Web 也有了对应的暗黑模式&#xff0c;默认情况下 Web 的暗黑模式是跟随系统的。 你只需要将暗黑模式的样式写到下面这样的媒体选择器中…
阅读更多...
Ubuntu软件源、pip源大全，国内网站网址，阿里云、网易163、搜狐、华为、清华、北大、中科大、上交、山大、吉大、哈工大、兰大、北理、浙大

Ubuntu软件源、pip源大全，国内网站网址，阿里云、网易163、搜狐、华为、清华、北大、中科大、上交、山大、吉大、哈工大、兰大、北理、浙大

文章目录 一、企业镜像源1、阿里云2、网易1633、搜狐镜像4、华为 二&#xff1a;高校镜像源1、清华源2、北京大学3、中国科学技术大学源 &#xff08;USTC&#xff09;4、 上海交通大学5、山东大学6、 吉林大学开源镜像站7、 哈尔滨工业大学开源镜像站8、 西安交通大学软件镜像…
阅读更多...
使用ChatGPT进行创意写作的缺点

使用ChatGPT进行创意写作的缺点

Open AI警告ChatGPT的使用者要明白此工具的局限性&#xff0c;更不应完全依赖。作为一位创作者&#xff0c;这一点非常重要&#xff0c;应尽可能地避免让版权问题或不必要的文体问题出现在自己的作品中。[1] 毕竟使用ChatGPT进行创意写作目前还有以下种种局限或缺点[2]&#xf…
阅读更多...
prompt工程（持续更新ing...）

prompt工程（持续更新ing...）

诸神缄默不语-个人CSDN博文目录 我准备想办法把这些东西整合到我的ScholarEase项目里。 其实以现在GPT-4的能力来说&#xff0c;直接就当日常对话随便直接说、直接问&#xff0c;基本没有太大的问题。 有时使用更复杂、详细、明确的prompt可能会起到提升作用。 有一些简单的…
阅读更多...
Open cv C++安装

Open cv C++安装

注意;要退出conda的虚拟环境 依赖 1.更新系统 sudo apt-get update sudo apt-get upgrade 2.安装相关的依赖 sudo apt-get install build-essential cmake git libgtk2.0-dev pkg-config libavcodec-dev libavformat-dev libswscale-dev sudo apt-get install libjpeg-de…
阅读更多...
【组合数学】CF1312 D

【组合数学】CF1312 D

Problem - 1312D - Codeforces 题意&#xff1a; 思路&#xff1a; Code&#xff1a; #include <bits/stdc.h>#define int long longusing i64 long long;constexpr int N 2e5 10; constexpr int M 2e5 10; constexpr int mod 998244353; constexpr int Inf 1e1…
阅读更多...
小记std::unique_copy使用方法

小记std::unique_copy使用方法

因博主工作经验有限&#xff0c;只能通过有限的使用场景来介绍该特性 https://en.cppreference.com/w/cpp/algorithm/unique_copy 使用场景 将一些元素拷贝到另一个地方&#xff0c;可以定义重复的规则&#xff0c;拷贝出来之后是不带有连续相同元素的元素集合 如果需要使用…
阅读更多...
azure VM完全复制

azure VM完全复制

创建虚拟机&#xff0c;并创建linux服务&#xff0c;可以参考 https://blog.csdn.net/m0_48468018/article/details/132267096 &#xff0c; https://blog.csdn.net/m0_48468018/article/details/132267315在虚拟机中点击磁盘快照&#xff0c;创建磁盘快照 通过磁盘快照创建磁盘…
阅读更多...
【LeetCode75】第三十二题 链表最大孪生和

【LeetCode75】第三十二题 链表最大孪生和

目录 题目: 示例: 分析: 代码: 题目: 示例: 分析: 题目让我们求出链表的最大孪生和&#xff0c;那么什么是孪生和呢&#xff0c;就是对称的节点就是孪生节点&#xff0c;他们的和就是孪生和。 比如第一个节点的孪生节点就是最后一个节点&#xff0c;第二个节点的孪生节点…
阅读更多...
【Docker】已经创建好的Docker怎么设置开机自启

【Docker】已经创建好的Docker怎么设置开机自启

已经创建好的Docker怎么设置开机自启 1.使用命令Docker update来完成2.查看是否开启3.验证是否开启 1.使用命令Docker update来完成 操作步骤&#xff1a; docker update --restartalways 容器ID2.查看是否开启 docker inspect 容器Id看到这里RestartPolicy设置为如图&#…
阅读更多...
Verilog 入门

Verilog 入门

Verilog 入门 本内容来自 牛客网Verilog入门特别版 1、一个没有输入和一个输出常数1的输出的电路&#xff0c;输出信号为one module top_module(one);output wire one;assign one 1b1; endmodule2、创建一个具有一个输入和一个输出的模块&#xff0c;其行为类似于电路上的连…
阅读更多...
回归预测 | MATLAB实现FA-BP萤火虫算法优化BP神经网络多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现FA-BP萤火虫算法优化BP神经网络多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现FA-BP萤火虫算法优化BP神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现FA-BP萤火虫算法优化BP神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍程…
阅读更多...
CRYPTO 密码学-笔记

CRYPTO 密码学-笔记

一、古典密码学 1.替换法&#xff1a;用固定的信息&#xff0c;将原文替换成密文 替换法的加密方式&#xff1a;一种是单表替换&#xff0c;另一种是多表替换 单表替换&#xff1a;原文和密文使用同一张表 abcde---》sfdgh 多表替换&#xff1a;有多涨表&#xff0c;原文和密文…
阅读更多...
安装jenkins-cli

安装jenkins-cli

1、要在 Linux 操作系统上安装 jcli curl -L https://github.com/jenkins-zh/jenkins-cli/releases/latest/download/jcli-linux-amd64.tar.gz|tar xzv sudo mv jcli /usr/local/bin/ 在用户根目录下&#xff0c;增加 jcli 的配置文件&#xff1a; jcli config gen -ifalse …
阅读更多...
CPU 飙升问题排查

CPU 飙升问题排查

CPU 飙升问题排查 1.输入top查看各linux进程对系统资源的使用情况 2.输入top -H -p pid 通过此命令可以查看实际占用CPU最高的的线程的id&#xff0c;pid为刚才资源使用高的pid号 出现具体线程的资源使用情况&#xff0c;表格里的pid代表线程的id&#xff0c;我们称他为tid …
阅读更多...
ubuntu 安装 postgresql以及 wal回滚

ubuntu 安装 postgresql以及 wal回滚

安装 sudo apt install postgresql postgresql-contrib设置远程连接 修改/etc/postgresql/12/main/postgresql.conf **将listen_addresses 改成 ***修改/etc/postgresql/12/main/pg_hba.conf 找到如下信息 #IPv4 local connections: 修改为 host all all 0.0.0.0/0 md5 重启…
阅读更多...
生成式AI和大语言模型 Generative AI LLMs

生成式AI和大语言模型 Generative AI LLMs

在“使用大型语言模型(LLMs)的生成性AI”中&#xff0c;您将学习生成性AI的基本工作原理&#xff0c;以及如何在实际应用中部署它。 通过参加这门课程&#xff0c;您将学会&#xff1a; 深入了解生成性AI&#xff0c;描述基于LLM的典型生成性AI生命周期中的关键步骤&#xff…
阅读更多...
opencv-yolov8-目标检测

opencv-yolov8-目标检测

import cv2 from ultralytics import YOLO# 模型加载权重model YOLO(yolov8n.pt)# 视频路径cap cv2.VideoCapture(0)# 对视频中检测到目标画框标出来 while cap.isOpened():# Read a frame from the videosuccess, frame cap.read()if success:# Run YOLOv8 inference on th…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023