vue3.0的mitt使用

98 阅读 0 评论 65 点赞

我是靠谱客的博主大气秋天，最近开发中收集的这篇文章主要介绍vue3.0的mitt使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.安装依赖

npm install --save mitt

2.在main.ts或者main.js同级目录下建立一个bus.js文件

import mitt from "mitt";
const bus = {};
const emitter = mitt();
bus.$on = emitter.on;
bus.$off = emitter.off;
bus.$emit = emitter.emit;

export default bus

3.在需要用bus.js的组件中引用

<template>
  <div class="Parent" ref="Parent">
    <el-button @click="EmitValue">EmitValue</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted,reactive,provide,readonly,ref} from 'vue';
import bus from '@/bus'
export default defineComponent({
  name: 'Parent',
  components:{

  },
  setup(props,ctx){

  //绑定的方法,第三方传值(任何组件的传值)
  const EmitValue=()=>{
    bus.$emit("Deom","Deom")
  }
 
  })
  return{
    EmitValue
  }
  },
  props: {
  },
});
</script>

4.在接收消息的组件中引用

<template>
  <div class="Other">
    <p>{{name}}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent,onMounted,reactive,inject,ref} from 'vue';
import bus from '@/bus'
export default defineComponent({
  name: 'Other',
  components:{
    
  },
  setup(props){
  const name = ref(null)
  bus.$on('wode', (data) => {
    name.value = data
    console.log(data)
  })
  
  onMounted(async () => {
    
  })
  return{
    name,
  }
  },
  props: {
  },
});
</script>