vue3兄弟组件间通信方法

《vue3兄弟组件间通信方法》

在Vue3项目中，兄弟组件间的通信是一个常见的需求。为了解决这个问题，有多种可行的方案，例如通过事件总线、Vuex状态管理库或者借助父组件进行传递等。

一、通过父组件传递

这是比较基础且直观的方法。在父组件中定义一个数据和一个方法：

vue
// 父组件 ParentComponent.vue

  <div>
    
    
  </div>
</p>


import { ref } from 'vue'
import ChildA from './ChildA.vue'
import ChildB from './ChildB.vue'

const msg = ref('初始消息')

const updateMessage = (newMsg) => {
  msg.value = newMsg
}


<p>

然后在子组件ChildA中：

vue
// ChildA.vue

  <div>
    
  </div>
</p>


import { defineProps, defineEmits, ref, watch } from 'vue'

const props = defineProps(['message'])
const emit = defineEmits(['updateMsg'])

const localMsg = ref(props.message)

const changeMsg = () => {
  emit('updateMsg', localMsg.value)
}

watch(() => props.message, (newVal) => {
  localMsg.value = newVal
})


<p>

在子组件ChildB中：

vue
// ChildB.vue

  <div>
    {{ message }}
  </div>
</p>


import { defineProps } from 'vue'

const props = defineProps(['message'])


<p>

二、使用provide / inject

在父组件中提供数据：

vue
// 父组件 ParentComponent.vue</p>


import { provide, ref } from 'vue'
import ChildA from './ChildA.vue'
import ChildB from './ChildB.vue'

const sharedMsg = ref('共享消息')
provide('sharedMsg', sharedMsg)


<p>

在兄弟组件中注入：

vue
// ChildA.vue 或 ChildB.vue</p>


import { inject } from 'vue'

const sharedMsg = inject('sharedMsg')


<p>

三、使用mitt事件总线

先安装mitt：npm install mitt。然后创建一个事件总线文件bus.js：

javascript // bus.js import mitt from 'mitt' const bus = mitt() export default bus

在发送消息的组件（如ChildA）中：

vue
// ChildA.vue

  <div>
    <button>发送消息给兄弟组件</button>
  </div>
</p>


import bus from './bus'

const sendMessage = () => {
  bus.emit('customEvent', '来自ChildA的消息')
}


<p>

在接收消息的组件（如ChildB）中：

vue
// ChildB.vue</p>


import bus from './bus'
import { onMounted, ref } from 'vue'

const messageFromSibling = ref('')

onMounted(() => {
  bus.on('customEvent', (msg) => {
    messageFromSibling.value = msg
  })
})


<p>
  <div>
    {{ messageFromSibling }}
  </div>

以上就是在Vue3中兄弟组件间通信的一些常用方法，可以根据项目的实际情况选择合适的方式。