vue3学习笔记(兄弟组件传参)
2023-09-11 14:16:59 时间
兄弟组件传参数
mitt使用方式和vue2的事件大巴类似。
- 安装
npm i mitt -S
- 新建plugin/Bus.js
import mitt from 'mitt '
cosnt emitter = mitt()
export default emitter
- Home.vue
<templete>
<A />
<B />
<templete>
<script setup>
import A from '../components/A.vue'
import B from '../components/B.vue'
</script>
- A.vue
<template>
<div>
<h1>A组件</h1>
<button @click='btn'>按钮</button>
</div>
</template>
<script setup>
import mitter from '/plugin/Bus.js '
const str = ref('A组件的数据');
const btn = ()=>{
mitter.emit('fn',str)
}
</script>
- B.vue
<template>
<div>
<h1>B组件</h1>
<div><{{variable}}/div>
</div>
</template>
<script setup>
import mitter from '/plugin/Bus.js '
const variable = ref('')
onBeforeMount(()=>{
const mitter.on('fn',res=>{
variable.value = res.value;
})
})
</script>
相关文章
- 【Vue3】通过Teleport实现子组件div显示在整个页面中
- 【Vue3】通过provide和inject实现【祖组件与子组件】数据传参
- 【Vue和Vue3+vite】通过脚手架配置代理实现axios跨域与第三方后台数据传递(图文+代码示例)
- vue3 增加了哪些新特性?
- vite&vue3中使用批量导入 import.meta.glob import.meta.globEager
- Vue3.x+Element Plus仿制Acro Design简洁模式分页器组件
- vue3使用element-plus的el-table组件报错关键字‘emitsOptions‘和‘insertBefore
- vue3.x keep-alive 写法
- 深入聊一聊vue3中的reactive()
- 【手撕源码】vue3响应式原理解析(文末抽奖)
- Vue2.7正式发布,终于可以在Vue2项目中使用Vue3的特性了,真香~
- 尤雨溪:Vue3 将在2022年2月7日成为新的默认版本(你准备好了吗?)
- 上手体验Vue3 Vite的魅力(“快”的艺术),有了它,你还会用webpack吗?
- Vue3+elementplus搭建通用管理系统实例十三:添加树形选择器及多选功能
- vue3响应式reactive的实现原理;proxy深层代理;vue3响应式api
- vue3组件内部改变props的值
- 浅析Vue3中如何通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定
- 浅析setup如何通过ref获取子组件实例中的DOM结构/数据/方法及获取子组件实例数据都是空的处理(defineExpose API 的使用)、Vue3模板引用refs、在组合式API中使用template refs、for循环中如何获取及重置refs、如何监听模板引用
- 浅析Vue3新特性-Teleport(任意传送门也称瞬间移动):为什么需要Teleport、与React的Portals特性、如何使用(直接使用、与组件搭配使用、使用多个teleport)、teleport API(to及disabled使用介绍)
- vue3中递归监听和非递归监听(系列七)
- vue3 自定义指令 + 自定义组件 v-loading
- Vue3:自定义指令以及简单的后台管理权限封装
- vue3:组件通信v-model式写法
- 15.0 vue3 provide&inject跨组件通信方式
- 4.0 vue3 computed计算属性
- 3.0 vue3有关组件传值