【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

相关推荐
dr李四维14 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_28 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~35 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ38 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z44 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴1 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue