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文章来源:https://www.toymoban.com/news/detail-645701.html
<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文章来源地址https://www.toymoban.com/news/detail-645701.html
<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>
到了这里,关于vue3的兄弟传参(三种方法)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!