VUE3+TS(父子、兄弟组件通信)_vue3兄弟组件通信-程序员宅基地

技术标签: 前端  vue.js  javascript  

目录

父传子值、方法(子调用父值、方法)

子传父值(父调用子值)

父读子(子传父)(父调用子值、方法)

兄弟(任意组件)通信

引入Mitt来完成任意组件通信


父传子值、方法(子调用父值、方法)

1、统一规范写法,通过在子组件标签上绑定属性和值,来传递到子组件,子组件再通过defineProps来接收,先给其定义类型再用withDefaults是为了在不传递的时候给其一个默认值

//父组件直接在标签发送
<Children :aaa="aaa" :data="data"></Children>
------------------------------------------------
//子组件两种接收方式
//方式一:子组件定义类型再接收
//?表示可传可不传
type Props = { aaa?: String; data?: number[] };
//通过defineProps接受,给一个默认值    
const a = withDefaults(defineProps<Props>(), {
  aaa: '张三',
  data: [1, 2],
});
//调用
const changehandle = () => {
  console.log(a.aaa);
  console.log(a.data[0]);
};
//方式二:子组件混合定义接收
import { PropType } from 'vue';
const prop = defineProps({
    aaa: {
        type: Object as PropType<Student>,
        default: () => { }
    },
    //定义接收父组件方法
    bbb: {
        type: Function,
        default: () => { }
    },
})
//调用
prop.aaa;
prop.bbb();

2、利用vue自带的provide传递、inject接受,用法很简单,需要响应式只需要用ref包起来

// 父组件,引入provide,然后定义一个属性和值
import {provide} from 'vue'
provide('flag',xxx)

// 子组件,先引入inject,再获取
import {inject} from 'vue'
let data = inject('flag')

子传父值(父调用子值)

先用defineEmits定义一个emit,里面存放即将被调用的自定义事件名,然后将其写进一个方法里,再通过父组件来定义这个事件,触发事件即可获取绑定的属性值

//子组件定义一个点击事件
<el-button type="success" @click="changehandle">子组件按钮</el-button>
//定义一个自定义事件
const emit = defineEmits(['clickToFather']);
//通过事件传过去
const changehandle = () => {
  emit('clickToFather', msg);
};

//父组件使用自定义事件名
<Children @clickToFather="getList"></Children>
//调用获取
const getList = (msg: string) => {
  console.log(msg);
};

父读子(子传父)(父调用子值、方法)

简单来说就是父组件获取到子组件的实例,用实例来调用子组件的方法,但是和vue2不同的是,子组件需要将方法暴露出去,父组件才能通过实例获取到,这样就确保了足够的安全性

//子组件将值暴露出去
defineExpose({
  msg,
});

//父组件获得子组件的实例
<Children ref="menus"/>
//定义
const menus = ref(null);
//调用
const changehandle = () => {
  console.log(menus.value.msg);
};

兄弟(任意组件)通信

1、兄弟组件通信:可以先把值传给父组件,再通过父组件传给另一个子组件,就做到了兄弟组件的传参,但是问题就是及其麻烦,所以引出第二种方式

2、通过消息的发布订阅来实现,定义一个bus(可实现任意组件通信

      先在父组件所在目录下定义一个Bus.ts文件

// 先定义一个类型,emit作为发布(传递),on作为订阅(接收)
// name是事件名称,callback是一个回调函数
type BusClass = {
    emit:(name:string) => void
    on:(name:string, callback:Function) => void
}
// 定义多种参数类型
type PramsKey = string | number | symbol
// 定义一个调用中心,可以接收多个参数
type List = {
   [key:PramsKey]: Array<Function>
}
class Bus implements BusClass {
    list: List
    constructor (){
        // 初始化list
        this.list = {}   
    }
    // 发布事件,...args解构多个参数
    emit (name:string,...args:Array<any>){
        // 获取到list里的数据
        let evnentName:Array<Function> = this.list[name]
        evnentName.forEach(fn =>{
            fn.apply(this, args)
        })
    }
    // 接收事件
    on (name:string, callback:Function){
        // 如果是第一次注册,则为空;如果被多次注册,则采用之前注册的名字
        let fn:Array<Function> = this.list[name] || []
        fn.push(callback)
        this.list[name] = fn
    }
}
// 导出bus
export default new Bus()

现在来使用刚刚定义的bus,将A组件的值传递给B组件

A组件

<button @click="emitB">派发一个事件</button>

// 引入bus
import Bus from '../Bus'
// 定义一个属性值
let flag = '我来自A组件'
const emitB = () =>{
    // 通过Bus发布出去一个'on-click'事件,并携带flag 参数
    Bus.emit('on-click',flag)
}

B组件

// 引入bus
import Bus from '../Bus'
// 接收事件
Bus.on('on-click',(flag: string) =>{
    console.log('接收的值为',flag)
})

这样就完成了一个兄弟组件的传参

该方法不仅方便,且可以实现任意组件通信,极其方便实用!

该方法不仅方便,且可以实现任意组件通信,极其方便实用!

引入Mitt来完成任意组件通信

当然了,上面只是我们自己手写的Bus,其实这个库别人早已写好了,我们可以直接引入

首先安装依赖:

#安装命令
npm install mitt -S

全局使用

在main.ts文件中引入并开启使用

// 引入
import mitt from 'mitt'
//定义
const Mit = mitt()
//全局声明
declare module 'vue' {
    export interface ComponentCustomProperties{
        $Bus: typeof Mit
    }
}
//使用
app.config.globalProperties.$Bus = Miit()

引入完成,使用方式和手写的基本一致,只不过名字不同

A组件

<button @click="emit">派发一个事件</button>

//引入
import {getCurentInstance} from 'vue'
//初始化
const instance = getCurentInstance()
//使用(发送事件)
const emit = () =>{
    // emit(自定义事件名,参数,....)
    instance?.proxy?.$Bus.emit('on-click',xxx)
}

B组件

// 引入bus
import getCurentInstance from 'vue'
// 初始化
const instance = getCurentInstance()
// 接收事件
instance?.proxy?.$Bus.on('on-click',(xxx: string) =>{
    console.log('接收的值为',xxx)
})

如果此时A组件发送了多个事件,B组件可以用*接收,写法如下

// yyy,xxx为两个事件的参数
instance?.proxy?.$Bus.on('*',(yyy,xxx) =>{
    console.log('接收的值为',yyy,xxx)
})

有发送事件,自然还有取消事件

// 这里先把Bus提取出来
const Bus = (xxx) =>{
    console.log('接收的值为',xxx)
}
// 这里依旧写on,接收事件
instance?.proxy?.$Bus.on('on-click',Bus)

// 这里还可以调用取消指定事件
// off(取消指定的mitt事件,取消的函数)
instance?.proxy?.$Bus.off('on-click',Bus)

// 还可以取消全部事件
instance?.proxy?.$Bus.all.clear()

该方法不仅方便,且可以实现任意组件通信,极其方便实用!

该方法不仅方便,且可以实现任意组件通信,极其方便实用!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Johnson_7/article/details/125913937

智能推荐

pyhton爬虫(9)——使用XPath提取网页信息_用xpath爬取百度首页的标题-程序员宅基地

文章浏览阅读3.2k次。1. XPath基础1.1 什么是XPath?XPath 是一门在 XML 文档中查找信息(节点)的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。1.2 节点节点是XML文档中最小构成单位,一共有7种:(1)元素节点(element)(2)属性节点(attribute)(3)文本节点(text)(4)名称命名节点(namespace)(5)处理命令节点(processing-ins_用xpath爬取百度首页的标题

Linux进行AES加密每次结果都不一致并且解密失败报错_linux base64decoder().decodebuffer报错-程序员宅基地

文章浏览阅读6.5k次。1. 现象windows操作系统下进行"123456"的AES加密encrypted message is below :QLNYZyjRnKF/zxAjzDt/lw==decrypted message is below :123456阿里云服务器,同样是"123456"的密码,每次加密结果都不一样,且不是QLNYZyjRnKF/zxAjzDt/lw==,解密是报错..._linux base64decoder().decodebuffer报错

帆软入门操作_帆软使用手册-程序员宅基地

文章浏览阅读1.2w次,点赞12次,收藏99次。帆软入门操作1.定义数据库连接数据库信息2.新建普通报表点击 文件,可新建普通报表新建普通报表后,可点击 保存也可以在这改名3.创建数据集写SQL语句预览报表1.定义数据库连接选“服务器”,点击“定义数据库连接”。数据库信息首先 点击 左上角 的 “加” 号2.新建普通报表点击 文件,可新建普通报表新建普通报表后,可点击 保存此时可以 改名字也可以在这改名3.创建数据集模板数据集:在当前报表使用服务器数据集:共享点击上图中的加号,添加SQL语句修改 和 删除 键 _帆软使用手册

Flink / Scala 实战 - 1.使用 CountWindow 实现按条数触发窗口_flink count window sql-程序员宅基地

文章浏览阅读656次。CountWindow 数量窗口分为滑动窗口与滚动窗口,类似于之前 TimeWindow 的滚动时间与滑动时间,这里滚动窗口不存在元素重复而滑动窗口存在元素重复的情况,下面 demo 场景为非重复场景,所以将采用滚动窗口。......_flink count window sql

nginx配置https并强制跳转443端口_nginx 强制443-程序员宅基地

文章浏览阅读1.5w次。在Nginx/Tengine服务器上安装证书前提条件申请证书时需要选择 系统自动创建CSR。操作指南登录阿里云SSL证书控制台。 在SSL证书页面定位到需要下载的证书并单击证书卡片右下角的下载打开证书下载对话框。 在证书下载对话框中定位到Nginx/Tengine服务器,并单击右侧操作栏的下载将Apache版证书压缩包下载到本地。 解压Nginx/Tengine证书。您将看到..._nginx 强制443

配置炫酷的终端_meslolgs nf-程序员宅基地

文章浏览阅读1k次。一、MacOs系统MacOs中终端使用Iterm2。1. 配置oh-my-zsh插件的存放位置:~/.oh-my-zsh/plugins, 下载常用的插件 git clone https://github.com/zsh-users/zsh-syntax-highlighting.git修改配置文件生效配置:source ~/.zshrc配置文件:2. 字体安装字体 brew tap homebrew/cask-fonts brew cask install font-ha_meslolgs nf

随便推点

在瑞萨CS+(Cube Suite+)使用中文注释及中文字符串的方法_瑞萨 cs+中文注释-程序员宅基地

文章浏览阅读1.8k次。一、测试环境瑞萨Cube Suite+ for CA,CX V4.00.00,其他请自行测试。二、设置1.在菜单Tool中,选中Options,在弹出的窗口中,进行如下图的设置:2.按下图步骤,在工程的Build Tool处右键,在“Kanji character code of source”处选择“ECU_JP(-ze)”..._瑞萨 cs+中文注释

Python dir、__builtin__内置函数_dir(__builtin__)-程序员宅基地

文章浏览阅读1.1k次。科学计数法:&gt;&gt; format(2**20, '.2e')'1.05e+06'小数 ⇒ 百分数&gt;&gt; format(.1234, '.1%')12.3%_dir(__builtin__)

AI中台架构模型解析-程序员宅基地

文章浏览阅读1.8k次。传统上,企业部署AI应用,一般通过单点开发的方式,即“烟囱式”架构部署AI应用。海量AI应用场景爆发使得原来传统的“烟囱式“AI开发流程无法跟上业务的快速变化,开发速度慢、周期长。越来越多..._ai中台模型

干货!推荐一个github上超过5万star的Java学习宝典-程序员宅基地

文章浏览阅读8.7k次,点赞51次,收藏12次。今天给大家推荐一个学习宝库:互联网 Java 工程师进阶知识完全扫盲。...

EntityWrapper 在and条件中嵌套or语句_entitywrapper or-程序员宅基地

文章浏览阅读4.6k次。想要写一个类似如下的语句:select * from table_1 where (coulmn_1 like '%XX%' or coulmn_1 like '%XX%') and del_flag='0'但是在实际执行过程中,mybatisplus将其解析成了:select * from table_1 where coulmn_1 like '%XX%' or coulmn_1 like '%XX%' and del_flag='0'显然,这里由于没有括号,条件是不一样的。使用andN_entitywrapper or

Python 告诉你:熊市将去,牛市要来!_牛熊市划分 代码-程序员宅基地

文章浏览阅读4.9k次,点赞24次,收藏48次。漫漫熊市,这个行业显得极为浮躁。但要是营长告诉你,熊市即将结束,牛市马上到来,你信吗?近来营长看到朋友圈中大咖集结、开启什么「熊市破冰之旅」,不得不说,甚是羡慕。但营长深知,“寒冬”不宜出远门,仍需在家埋头苦读,潜心钻研。前几天,偶然了解到一位传奇人物——沃伦·巴菲特的黄金搭档、现年94岁的美国投资家查理·芒格。在过去45年中,他和巴菲特联手创造了有史以来最优秀的投资纪..._牛熊市划分 代码