vue 兄弟组件的信息传递的方法实例详解

2023-08-15 14:14:05 149

前言

兄弟组件的信息传递有三种方式：

1.vuex传递。

会将信息公有化。

此方法可在所有组件间传递数据。

2.建立Vue实例模块传递数据。

Vue实例模块会成为共用的事件触发器。

其通过事件传递的信息不回被公有化。

3.建立事件链传递数据。

一个兄弟组件通过事件将信息传给兄弟组件共有的父组件。

父组件再将信息通过属性传递给另一个兄弟组件。

若兄弟组件不是亲兄弟，而是堂兄弟，也就是他们有一个共同的爷爷，那么此方法会使程序变得繁琐。

一，vuex传递数据

1.安装vuex

npminstallvuex--save

2.store.js

importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)
exportconststore=newVuex.Store({
state:{
msgFromA:'A还没说话',
msgFromB:'B还没说话'
},
getters:{
},
mutations:{
msgAChange(state,msg){
state.msgFromA=msg;
},
msgBChange(state,msg){
state.msgFromB=msg;
},
}
})

3.子组件A.vue

4.子组件B.vue

二，Vue实例模块传递数据

1.建立Vue实例模块bus.js

importVuefrom'vue'
exportdefaultnewVue();

2.子组件A.vue

3.子组件B.vue

三，事件链传递数据

1.父组件C.vue

2.子组件A.vue

3.子组件B.vue

总结

以上所述是小编给大家介绍的vue兄弟组件的信息传递的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue 兄弟组件的信息传递的方法实例详解

A模块

B模块

A模块

B模块

事件链传递数据

A模块

B模块

随机推荐

vue 兄弟组件的信息传递的方法实例详解

A模块

B模块

A模块

B模块

事件链传递数据

A模块

B模块

热门推荐

随机推荐