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; }, } })
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前标题:vue兄弟组件的信息传递的方法实例详解-创新互联
浏览路径:http://pwwzsj.com/article/dccoeo.html