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

前言

为册亨等地区用户提供了全套网页设计制作服务,及册亨网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、册亨网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

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

1.vuex 传递。

会将信息公有化。

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

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

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

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

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

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

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

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

一,vuex 传递数据

1.安装vuex

npm install vuex --save

2.store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store=new Vuex.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

import Vue from 'vue'
export default new Vue();

2.子组件 A.vue



3.子组件 B.vue



三,事件链传递数据

1.父组件 C.vue



2.子组件 A.vue



3.子组件 B.vue



总结

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


网页标题:vue兄弟组件的信息传递的方法实例详解
文章网址:http://myzitong.com/article/ihdoic.html