vue3的兄弟传参三种方法
1.兄弟A先给父元素 父元素再给子组件B (vue2的思路)
A组件
<template>
<div style="width:300px;height:200px;background:blue">
<button @click="add">A派发事件</button>
</div>
</template>
<script setup lang="ts">
import { defineEmits } from "vue"
// emit
const emit=defineEmits(['onclick']);
let flag=false;
const add=()=>{
flag=!flag;
emit('onclick',flag)
}
</script>
<style scoped>
</style>
父组件
<template>
<div>
<A @onclick="onclick"></A>
//在把A组件传输的值传给组件B
<B :flag='flag'></B>
A组件传输的值{{flag}}
</div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import A from './components/fuzi/A.vue'
import B from './components/fuzi/B.vue'
let flag=ref(null);
const onclick=(params:boolean)=>{
//拿到传输的值赋给变量flag
flag.value=params;
}
</script>
<style scoped>
</style>
组件B
<template>
<div style="width:300px;height:200px;background:red">
B组件接受的值: {{flag}}
</div>
</template>
<script setup lang="ts">
import { defineProps} from "vue";
import mitts from '../../util/bus.js';
type Props={
flag:boolean
}
defineProps<Props>();
</script>
<style scoped>
</style>
2.兄弟组件直接传输 (局部引入)
npm install mitt
定义一个bus.js
import mitt from 'mitt';
const mitts=mitt();
export default mitts;
组件A:
<template>
<div style="width:300px;height:200px;background:blue">
<button @click="child">兄弟传参</button>
</div>
</template>
<script setup lang="ts">
import mitts from '../../util/bus.js';
let flag=false;
const child=()=>{
mitts.emit('event',flag)
}
</script>
<style scoped>
</style>
组件B:
<template>
<div style="width:300px;height:200px;background:red">
B组件接受的值: {{flag}}
</div>
</template>
<script setup lang="ts">
import {onBeforeMount,ref} from "vue";
import mitts from '../../util/bus.js';
let flag=ref(null);
onBeforeMount(()=>{
mitts.on('event',(e:boolean)=>{
flag.value=e
})
})
</script>
<style scoped>
</style>
3.兄弟传参(全局引入)
npm install mitt
main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import mitt from 'mitt'
const app=createApp(App);
app.config.globalProperties.$mitt=mitt();
app.mount('#app')
组件A
<template>
<div style="width:300px;height:200px;background:blue">
<button @click="child">兄弟传参</button>
</div>
</template>
<script setup lang="ts">
import { getCurrentInstance,ComponentInternalInstance } from "vue"
const {appContext }=getCurrentInstance() as ComponentInternalInstance
let flag=false;
const child=()=>{
flag=!flag;
appContext.config.globalProperties.$mitt.emit('event',flag)
}
</script>
<style scoped>
</style>
兄弟B
<template>
<div style="width:300px;height:200px;background:red">
{{flag}}
</div>
</template>
<script setup lang="ts">
import { ref ,onBeforeMount,getCurrentInstance,ComponentInternalInstance} from "vue";
type Props={
flag:boolean
}
const flag<Props>=ref(null);
const {appContext}=getCurrentInstance() as ComponentInternalInstance
onBeforeMount(()=>{
appContext.config.globalProperties.$mitt.on('event',(e:boolean)=>{
flag.value=e;
})
</script>
<style scoped>
</style>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfbjfhb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信提示登录环境异常是什么意思原因
PHP中文网 04-09 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
微信人名旁边有个图标有什么用
PHP中文网 03-11