vue3非父子组件间传值

本示例基于vue3

使用要点：发送数据---- $bus.emit('password',num)

接收数据----在onMounted() 中 $bus.on('password',(data)=>{})

双方定一个交换数据的号码，使用该号码发送或接收数据

1、安装 npm i mitt

npm i mitt

2、在src文件夹下utils文件夹，在其下在新建bus.js文件

import mitt from 'mitt';
const $bus = mitt();
export default $bus;

3、使用

简单示例

新建两个兄弟组件，demoA发送数据，demoB接收数据

demoA

<template><div class="demoA"><h1>demoA</h1><el-button type="primary" @click="increace()">Primary</el-button>{{ num }}</div>
</template><script setup>
import { ref,onMounted  } from 'vue';
import $bus from '../utils/bus.js'const num = ref(1);
const increace = ()=>{setInterval(()=>{num.value++;// 发送数据$bus.emit('event',num)},1000)}
</script>

demoB接收数据

<script setup>
import { ref,unref,onMounted  } from 'vue';
import $bus from '../utils/bus.js'// 接收数据
onMounted(()=>{$bus.on('event',(data)=>{console.log(unref(data),'收到值了');})
})
</script>

踩坑点：

1、点击一次，触发多次，导致多次传递重复的值

解决办法：

在传值的页面加上 ↓

onUnmounted(() => {$bus.off('event');
});

vue3非父子组件间传值相关推荐

组件间数据交互——父组件向子组件传值（ props属性值类型）子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
初识 Vue（18）---（非父子组件间的传值）
非父子组件间的传值常一个应用会以一棵嵌套的组件树的形式来组织:将一个大组件进行拆分下图这种情况的组件间传值(父子组件间传值) 方法:父组件通过 Props 向子组件传值,子组件通过事件触发向父组件 ...
Vue非父子组件之间传值
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>非父子 ...
vue调用函数怎么传参_Vue(非)父子组件的传值以及方法调用
1.vue父组件给子组件传值的方法子组件中通过props接收传值 props:{ username:{ type:String, default:"" } } 2.vue父组件调 ...
Vue入门八、非父子组件间通讯
通过Bus总线机制实施非父子组件通讯 1.创建一个空实例(Bus中央事件总线也可以叫中间组件) 2.利用$emit $on 触发和监听事件实现非父子组件的通信组件之间使用this.$bus.$on传 ...
React组件通信-非父子组件间的通信
文章目录 React非父子组件通信小知识点的补充 Context应用场景 Context相关API Context使用流程 React非父子组件通信在React中, 非父子组件传递是通过一个API ...
父子组件间传值，父传子，子传父
父子组件给子组件传值第一步:爸爸将数据递给儿子,所以我们就需要在子组件绑定父组件的数据第二步:爸爸都已经将数据给你了,那么你就要礼貌性的伸手去拿,这时我们可以利用props去接爸爸传过来的值第三 ...
vue父子组件间传值(props)
先定义一个子组件,在组件中注册props <template><div><div>{{message}}(子组件)</div></div> ...
[vue] 父子组件间传值
环境说明: vue 3.x + ant-vue 父组件(Album.vue)使用: <template><div><a-button type="primary ...

vue3非父子组件间传值

踩坑点：

vue3非父子组件间传值相关推荐

最新文章

热门文章