vue3 组件传参

这篇具有很好参考价值的文章主要介绍了vue3 组件传参。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

父子 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

vue3 组件传参,vue.js,javascript
封装:
在项目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

<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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3-setup语法糖之组件传参(defineProps、defineEmits、defineExpose)

    vue3官方文档  defineProps  和  defineEmits  都是只能在  script setup  中使用的 编译器宏 。他们不需要导入,且会随着  script setup  的处理过程一同被编译掉。 defineProps  接收与  props  选项相同的值, defineEmits  接收与  emits  选项相同的值。   父传子  - defineProps  父组件 子

    2023年04月08日
    浏览(48)
  • 【Vue框架】Vue2中Vue.js路由—路由介绍、路由控制组件切换、路由重定向、路由传参、嵌套路由、路由布局(附源码详解)

    Vue Router官方文档 :https://router.vuejs.org/zh/installation.html 使用路由文件: 1.引用vue-router路由js文件 2.创建router对象 3.在vm对象中注册router对象 4.在视图中使用 router-view 标签 第一种传参形式——路由路径进行传参,如:/login?id=20 第二种传参形式——路由占位符进行传参,如:/

    2023年04月08日
    浏览(88)
  • Vue3 —— 在vue中动态引入组件以及动态引入js的方法

    文章目录 一 、 动态引入组件 1. 具体写法 二、 动态引入js文件 1. 具体写法 总结 定义一个异步组件,它在运行时是懒加载的。参数可以是一个异步加载函数,或是对加载行为进行更具体定制的一个选项对象。 在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时

    2024年02月12日
    浏览(52)
  • vue3使用flv.js播放推流视频,完整版组件

    目录 前言 1、构建 2、销毁 3、断流、卡顿重连 4、报错、停滞重连 5、累计延时处理 6、手动全屏 前言 本人是在vue3中使用flv.js处理推流时,遇到的一些问题,以及处理办法,归纳总结为一个组件,仅限于推流使用。 目前只贴出部分关键代码,若需要完整的代码,请往github下

    2024年02月16日
    浏览(42)
  • uniapp之通过vue-cli命令行创建Vue3/Vite版,JavaScript开发,引入uni-ui扩展组件

    注意: Vue3/Vite版要求 node 版本^14.18.0 || =16.0.0 如果使用 HBuilderX(3.6.7以下版本)运行 Vue3/Vite 创建的最新的 cli 工程,需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径(注意需要重启 HBuilderX 才可以生效) HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置

    2024年02月12日
    浏览(63)
  • vue3创建项目报错Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_ut

    报错信息: Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_util.parseArgs) is not a function     at init (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_modulescreate-vueoutfile.cjs:4481:72)     at Object.anonymous (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_module

    2024年04月10日
    浏览(163)
  • Vue3/ Vue3 计算属性computed函数 语法 与 介绍 、Vue3 Vue2computed计算属性 能不能传参 怎么传参

    语法: // 第一种语法get方法 (没有set) const 函数名 = computed(() = {   return  }) // 第二种语法 get set 方法 带有set参数 可以设置 const 函数名 = computed(() = { get() { return 结果 }, set( val ){  } }) 触发场景:  如果要访问计算属性 会自动执行 get 如果要修改计算属性 会自动执行 set 简介

    2024年02月02日
    浏览(51)
  • vue3 vue.config.js配置Element-plus组件和Icon图标实现按需自动引入

    打包时,报警告,提示包太大会影响性能 在页面直接使用,直接使用 SVG 图标,当做一般的 svg 使用 icon使用时需要用以下两种方式方式: 如果用在el-button里面的icon属性上使用,用SVG方式无效,还是需要引入再使用(不知道有没有其他方式) 注意: 使用 :icon=\\\"Edit\\\" 则icon的大

    2024年02月06日
    浏览(70)
  • Vue3中props传参(多种数据类型传参方式)

    在Vue3中,`props`接收的`type`类型有以下几种: 1. String:字符串类型 2. Number:数字类型 3. Boolean:布尔类型 4. Array:数组类型 5. Object:对象类型 6. Date:日期类型 7. Function:函数类型 8. Symbol:符号类型 9. [Custom Types]:自定义类型 你也可以使用数组形式来表示多种类型的

    2024年02月03日
    浏览(46)
  • 路由跳转和传参(vue3)

    准备工作:安装了路由,配置了路由表,全局注册了路由 ​ vue3路由官方文档 安装路由 npm yarn 路由跳转 首先在需要跳转的页面引入 API---useRouter 在跳转页面定义router变量 用 router.push跳转页面 (导航到不同的位置) 用router.replace(替换当前位置) 用router.go横跨历史 路由传参 一.标

    2024年02月10日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包