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"// emitconst emit=defineEmits(['onclick']);let  flag=false;constadd=()=>{
    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';typeProps={
    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';letflag=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';letflag=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
letflag=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";typeProps={
    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>