父子 props、$panrent
子父 emit自定义事件 $children $refs
兄弟 eventbus中央事件总线 vue3如果需要实现eventbus 安装第三方库mitt
跨层级 provider inject
组件状态共享工具: vuex pinia
vue3 兄弟组件传参
原理:
通过第三个“东西”,一个往里写,一个读取。
方案:Mitt.js
Mitt.js 安装及使用方法
安装
包的官网:
https://www.npmjs.com/package/mitt
npm i mitt
封装:
在项目src目录下新建一个 bus文件夹,里面再建一个bus.ts文件,用来存放咱们的EventBusa事件总线。在 bus.ts 文件中,封装代码。
简单:
// 引入库
import mitt from "mitt"
// 创建事件总线
const emitter = mitt()
// 导出
export default emitter
复杂点
import mitt, { Emitter } from 'mitt';
// 类型
const emitter: Emitter<MittType> = mitt<MittType>();
// 导出
export default emitter;
组件示例
父组件
<template>
<A />
<hr>
<B />
</template>
<script lang="ts" setup>
import A from './components/A.vue'
import B from './components/B.vue'
</script>
子组件A文章来源:https://www.toymoban.com/news/detail-859109.html
<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文章来源地址https://www.toymoban.com/news/detail-859109.html
<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>
到了这里,关于vue3 组件传参的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!