vue3 语法糖setup 兄弟组件传值
使用 mitt
// 全局引入
npm install mitt
或者
cnpm install mitt
在main文件中挂载
import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt' // 导入mitt
const app = createApp(App)
app.config.globalProperties.$mitt = new mitt() // mitt在vue3中挂载到全局
app.mount('#app')
组件1 借助imtt 通过emit传值
<script setup>
import { defineComponent,ref,reactive,getCurrentInstance } from 'vue'
// 兄弟组件传值
let { proxy } = getCurrentInstance()
let brother = ref(100)
function sendBrotherData() {
// 通过暴露info 传递 brother 的值
proxy.$mitt.emit('info', brother.value)
}
</script>
组件2
<script setup>
import { defineComponent,ref,reactive,getCurrentInstance } from 'vue'
let { proxy } = getCurrentInstance()
// 拿到info,获取info内部的值
proxy.$mitt.on('info', (res) => {
console.log(res)
// 打印 100
})
</script>
关于父子组件传值的内容请看另一篇:vue3语法糖+ts组件传值
vue3 语法糖setup 兄弟组件传值的更多相关文章
- vue 父子组件传值,兄弟组件传值
父子组件中的传值 父向子 v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></rou ...
- 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
1.创建组件的方法 函数组件 class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...
- React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...
- React中兄弟组件传值
兄弟组件传值 实际上是间接的通过第三方来实现传值,举例,第一个儿子把值传给父亲,父亲在把这个值传给第二个儿子,这样就实现了兄弟组件传值 来看代码: 父组件代码 import React from 'r ...
- 第七十五篇:Vue兄弟组件传值
好家伙, 兄弟组件的传值用到Eventbus组件, 1.EventBus的使用步骤 ① 创建 eventBus.js 模块,并向外共享一个Vue的实例对象 ②在数据发送方, 调用bus.$emit(' ...
- vue兄弟组件传值
vue中除了父子组件传值,父传子用props,子传父用$emit,有时候兄弟组件之间也需要传值 1. 先定义一个中间件,src下面新建self.js import Vue from 'vue'; le ...
- bus实现兄弟组件传值
传递的地方:两个组件都要引入这个公共的bus中转函数 Bus.js文件相当于一个公共的对象: 传递的文件中写入这个方法: 兄弟组件通过点击事件输出参数,需要的组件来接收传递过来的参数:
- vue.js 兄弟组件传值
另: 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了,虽然可以使用事件监听的方式,但还是不如vuex专业.比如A组件要告 ...
- vue兄弟组件传值$on多次执行的问题
首先附上如何进行兄弟组件通信的方法链接 https://segmentfault.com/a/1190000011882494 下面是$on多次执行的解决办法 https://blog.csdn.ne ...
- vue 父子组件、兄弟组件传值
参考文章:Vue2.0子同级组件之间数据交互 1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit 触发父组件的自定义事件. (一)父组件给子组件传值,关键字:props ...
随机推荐
- Java开发学习(四十二)----MyBatisPlus查询语句之条件查询
一.条件查询的类 MyBatisPlus将书写复杂的SQL查询条件进行了封装,使用编程的形式完成查询条件的组合. 这个我们在前面都有见过,比如查询所有和分页查询的时候,都有看到过一个Wrapper类, ...
- 数电第六周周结_by_yc
时序逻辑电路的设计要点: ①只有时钟信号和复位信号可以放在敏感列表里: ②使用非阻塞赋值,即使用"<="; ③无需对所有分支进行描述,对于未描述的分支,变量将保持 ...
- 第一章:seaborn图形美学
一.seaborn模板 1 import numpy as np 2 import matplotlib.pyplot as plt 3 4 def sinplot(flip=1): 5 x = np ...
- kali2021.4a安装angr(使用virtualenv)
在Linux中安装各种依赖python的软件时,最头疼的问题之一就是各个软件的python版本不匹配的问题,angr依赖python3,因此考虑使用virtualenv来安装angr Virtuale ...
- Java/JDK各版本主要特性汇总
目录 Java18(2022.3) Java17(2021.9)(LTS版本) Java16(2021.3) Java15(2020.9) Java14(2020.3) Java13(2019.9) ...
- [py]残留python.exe导致anaconda python路径无法识别
刚才重下anaconda真是给我整没脾气了 路径啥的都加好了,cmd输入python还是没有,给我跳应用商店去了- 重启也没用 经过一番搜索,找到解决办法: cmd输入"where pyth ...
- os与sys模块,json模块
一.os模块(重要) os模块主要与操作系统打交道 1.创建目录(文件夹) import os os.mkdir(r'a1') # 在执行文件所在的路径下创建单级目录a1 os.mkdir(r'a2\ ...
- APICloud平台使用融云模块实现音视频通话实践经验总结分享
需求概要:实现视频拨打.接听.挂断.视频界面大小窗口.点击小窗口实现大小窗口互换. 实现思路:一方拨打后,另一方要能收到相应事件,然后接听.接通后,渲染对方视频画面.那么己方视频画面什么时候渲染呢?对 ...
- 大数据 - DWS层 业务实现
统计主题 需求指标[ADS] 输出方式 计算来源 来源层级 访客[DWS] pv 可视化大屏 page_log 直接可求 dwd UV(DAU) 可视化大屏 需要用 page_log 过滤去重 dwm ...
- win7安装Anaconda+TensorFlow(cpu版)+配置PyCharm
本着不折腾不舒服斯基,好久没安装软件玩了.今天趁天气不错,安装下TensorFlow(cpu版)(因为没钱上GPU),首先在网上搜了下教程,原文出处: https://blog.csdn.net/u0 ...