vue3 兄弟组件传值
时间: 2023-11-08 21:02:08 浏览: 120
在Vue.js中,兄弟组件之间传递数值可以通过以下几种方法实现:
1. 使用事件总线(Event Bus):创建一个新的Vue实例作为事件总线,并在需要传递数据的组件中使用$emit触发事件,在接收数据的组件中使用$on监听事件并接收数据。
在父组件中创建一个事件总线:
```javascript
// EventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
```
在发送数据的组件中使用$emit触发事件:
```javascript
import { EventBus } from './EventBus.js'
// ...
EventBus.$emit('event-name', data)
```
在接收数据的组件中使用$on监听事件并接收数据:
```javascript
import { EventBus } from './EventBus.js'
// ...
mounted() {
EventBus.$on('event-name', (data) => {
// 处理接收到的数据
})
}
```
2. 使用Vuex:Vuex是Vue.js的状态管理库,可以用于在组件之间共享和传递数据。你可以在Vuex store中定义一个状态,然后在需要传递数据的组件中通过mutations改变该状态,其他组件可以通过getters获取该状态的值。
3. 使用$attrs和$listeners:在Vue 2.x中可以使用$attrs和$listeners属性实现兄弟组件之间的传值。但是在Vue 3.x中,由于Composition API的引入,$attrs和$listeners属性在组件实例上已经不可用了。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20250102104920.png)