【Vue】Vue3.0(二十)Vue 3.0 中mitt的使用示例

上篇文章 【Vue】Vue3.0(十九)Vue 3.0 中一种组件间通信方式-自定义事件

🏡作者主页:点击!

🤖Vue专栏:点击!

⏰️创作时间:2024年11月11日12点23分

文章目录

一、mitt 在示例代码中的使用解释

在给定的代码中,mitt库(这里假设emitter是基于mitt创建的实例)用于实现组件间的事件通信。

  1. Child1.vue中的使用
html 复制代码
<button @click="emitter.emit('send - toy', toy)">玩具给弟弟</button>

这里使用emitter.emit触发了一个名为send - toy的事件,并将toy的值作为参数传递。emitter是从@/utils/emitter引入的,它是基于mitt创建的事件发射器。这意味着Child1组件在按钮点击时,会发送一个事件,通知其他组件有玩具要传递的信息。

  1. Child2.vue中的使用
javascript 复制代码
emitter.on('send - toy', (value: any) => {
  toy.value = value;
});
onUnmounted(() => {
  emitter.off('send - toy');
});
- `emitter.on('send - toy',...)`:通过`on`方法监听`send - toy`事件。当`send - toy`事件被触发时,回调函数会被执行,将接收到的值赋给`toy`。这样,`Child2`组件就能接收到`Child1`组件发送的玩具信息。
- `onUnmounted(() => { emitter.off('send - toy'); })`:在`Child2`组件卸载时,使用`off`方法解绑`send - toy`事件。这是一种良好的实践,可以防止内存泄漏和不必要的事件监听。

效果:

child1没有给child2的时候

给了之后:

二、新的mitt使用示例

假设我们有一个简单的待办事项应用,有一个TodoList组件和一个TodoItem组件,当TodoItem完成时,需要通知TodoList更新完成事项的数量。

  1. 创建emitter.js(基于mitt
javascript 复制代码
import mitt from'mitt';

export default mitt();
  1. TodoItem.vue组件
html 复制代码
<template>
    <div class="todo-item">
      <input type="checkbox" v-model="isCompleted" @change="toggleCompleted">
      <!-- 下面这行有一个坑的存在,这里需要判断父传过来的todo是否为空,如果为空的时候不去取text,否则的话会报错 -->
      <span v-if="todo">{{ todo.text }}</span>  
    </div>
  </template>
  
  <script setup lang="ts"  name='todoItem'>
  import emitter from '@/utils/emitter';
  import { ref } from 'vue';
  
  interface Todo {
    text: String;
  }
  
  const props = defineProps<{
    todo: Todo;
  }>();
  

  const isCompleted = ref(false);
  
  const toggleCompleted = () => {
    //这里会根据子项的选中与否的状态来触发父组件中的完成数量的增减
    if (isCompleted.value) {
      emitter.emit('todo-completed');
    }else{
        emitter.emit('undo-completed');
    }
  };
  </script>
  
  <style scoped>
  .todo-item {
    display: flex;
    align-items: center;
    margin: 5px;
  }
  </style>

TodoItem组件中,当复选框的状态变为完成(isCompletedtrue)时,通过emitter.emit('todo - completed')触发todo - completed事件。

  1. TodoList.vue组件
html 复制代码
<template>
    <div class="todo-list">
      <h2>待办事项列表</h2>
      <TodoItem v-for="todo in todos" :key="todo.text" :todo="todo" />
      <p>已完成事项数量: {{ completedCount }}</p>
    </div>
  </template>
  
  <script setup lang="ts" name='todoList'>
  import TodoItem from './TodoItem.vue';
  import emitter from '@/utils/emitter';
  import { ref } from 'vue';
  
  const todos = ref([
    { text: '学习 Vue3' },
    { text: '阅读书籍' },
    { text: '锻炼身体' }
  ]);
  
  const completedCount = ref(0);
  
  //监听子组件触发的数量增加
  emitter.on('todo-completed', () => {
    completedCount.value++;
  });
 //监听子组件触发的数量减少
  emitter.on('undo-completed', () => {
    completedCount.value--;
  });
  </script>
  
  <style scoped>
  .todo-list {
    background-color: lightgray;
    padding: 10px;
  }
  </style>

TodoList组件中,使用emitter.on('todo - completed',...)监听todo - completed事件。每当TodoItem组件中的某个待办事项完成并触发该事件时,completedCount就会增加,从而更新已完成事项的数量显示。这样,通过mitt实现了组件之间的事件通信,让TodoList组件能够对TodoItem组件的状态变化做出响应。

效果

代码仓库:https://gitee.com/zhai_jiahao/vue3_learn

相关推荐
binqian几秒前
【Linux】内核模版加载modprobe | lsmod
linux·服务器·前端
customer085 分钟前
【开源免费】基于SpringBoot+Vue.JS课程答疑系统(JAVA毕业设计)
java·jvm·vue.js·spring boot·spring cloud·kafka·开源
abments10 分钟前
JavaScript逆向爬虫教程-------基础篇之JavaScript密码学以及CryptoJS各种常用算法的实现
javascript·爬虫·密码学
清灵xmf12 分钟前
TypeScript 中的 ! 和 ? 操作符
前端·javascript·typescript·?·
J总裁的小芒果20 分钟前
el-table中增加校验方法(二)
javascript·vue.js·elementui
Au_ust20 分钟前
css:权重计算
前端·css
葫芦鱼21 分钟前
怎么打造一个舒适的nodejs开发环境
前端·typescript
测试界的酸菜鱼1 小时前
使用 Python + Vue 搭建自动化平台的核心要点
vue.js·python·自动化
林太白1 小时前
手写Vue之Api-createApp()
前端
黑色叉腰丶大魔王1 小时前
《Javascript 网页设计案例分享》
javascript