vue3 组件传参

bash 复制代码
父子 props、$panrent
子父 emit自定义事件 $children $refs
兄弟 eventbus中央事件总线 vue3如果需要实现eventbus 安装第三方库mitt     
跨层级 provider inject
组件状态共享工具: vuex pinia

vue3 兄弟组件传参

原理:

通过第三个"东西",一个往里写,一个读取。

方案:Mitt.js

Mitt.js 安装及使用方法

安装

包的官网:

https://www.npmjs.com/package/mitt

bash 复制代码
npm i mitt

封装:

在项目src目录下新建一个 bus文件夹,里面再建一个bus.ts文件,用来存放咱们的EventBusa事件总线。在 bus.ts 文件中,封装代码。

简单:

bash 复制代码
// 引入库
import mitt from "mitt"
// 创建事件总线
const emitter = mitt()
// 导出
export default emitter

复杂点

bash 复制代码
import mitt, { Emitter } from 'mitt';

// 类型
const emitter: Emitter<MittType> = mitt<MittType>();

// 导出
export default emitter;

组件示例

父组件

bash 复制代码
<template>
  <A />
  <hr>
  <B />
</template>

<script  lang="ts" setup>
import A from './components/A.vue'
import B from './components/B.vue'
</script>

子组件A

bash 复制代码
<template>
    <div>A</div>
    <button @click="onSendBtn">给B组件进行传值</button>
</template>

<script  lang="ts" setup>
// 引入EventBus总线文件
import emitter from '../bus/bus.ts'
function onSendBtn(){
	emitter.emit('urlparam',{url:"https://www.baidu.com"})
}
</script>

子组件B

bash 复制代码
<template>
    <div>B</div>
</template>

<script  lang="ts" setup>
import { onBeforeUnmount, ref } from 'vue'
import emitter from '../bus/bus.ts'
// 创建响应式变量接收传参
 const url= ref('')
// 监听组件(兄弟组件)传参
// 第一个参数: 监听的连接名
// 第二个参数: 传递的数据
  emitter.on('urlparam', data => {
    console.log(data);
    url.value=data.url
 })
// 页面卸载时关闭EventBus总线的监听,不关闭会造成多次触发的问题
onBeforeUnmount(() => {
// 传入要关闭的连接
    emitter.off('urlparam')
})
</script>
相关推荐
叶落阁主1 分钟前
Neovim 插件 i18n.nvim 介绍
java·vue.js·vim
叫我詹躲躲2 分钟前
开发提速?Vue3模板隐藏技巧来了
前端·vue.js·ai编程
华仔啊2 分钟前
面试都被问懵了?CSS 的 flex:1 和 flex:auto 真不是一回事!90%的人都搞错了
前端·javascript
前端康师傅5 分钟前
JavaScript 函数详解
前端·javascript
葡萄城技术团队8 分钟前
从基础到实战:一文吃透 JS Tuples 与 Records 的所有核心用法
javascript
@小红花1 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵1 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
weixin_456904272 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js