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>