全国咨询热线:18720358503

餐馆微信小程序_vue 兄弟组件的信息传递的方法实

类别:媒体报道 发布时间:2021-01-07 浏览人次:

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

 template 
 div 
 h3 A 模块 /h3 
 p B 说:{{msgFromB}} /p 
 button @click="aSay" A 把自己的信息传给B /button 
 /div 
 /template 
 script 
 export default {
 data () {
 return {
 msg:'我是A',
 methods:{
 aSay(){
 this.$mit('msgAChange', this.msg);
 computed: {
 msgFromB() {
 return this.$store.state.msgFromB;
 /script 

4.子组件B.vue

 template 
 div 
 h3 B 模块 /h3 
 p A 说:{{msgFromA}} /p 
 button @click="bSay" B 把自己的信息传给A /button 
 /div 
 /template 
 script 
 export default {
 data () {
 return {
 msg:'我是B'
 methods:{
 bSay(){
 this.$mit('msgBChange', this.msg);
 computed: {
 msgFromA() {
 return this.$store.state.msgFromA;
 /script 

二,Vue 实例模块传递数据

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

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

2.子组件 A.vue

 template 
 div 
 h3 A 模块 /h3 
 p B 说:{{msgFromB}} /p 
 button @click="aSay" A 把自己的信息传给B /button 
 /div 
 /template 
 script 
 import Bus from '../util/Bus'
 export default {
 data () {
 return {
 msg:'我是A',
 msgFromB:'B 还没说话',
 created(){
 let _this=this;
 Bus.$on('msgBChange',function(dt){
 _this.msgFromB=dt;
 methods:{
 aSay(){
 Bus.$emit('msgAChange',this.msg);
 /script 

3.子组件 B.vue

 template 
 div 
 h3 B 模块 /h3 
 p A 说:{{msgFromA}} /p 
 button @click="bSay" B 把自己的信息传给A /button 
 /div 
 /template 
 script 
 import Bus from '../util/Bus'
 export default {
 data () {
 return {
 msg:'我是B',
 msgFromA:'A 还没说话'
 created(){
 let _this=this;
 Bus.$on('msgAChange',function(dt){
 _this.msgFromA=dt;
 methods:{
 bSay(){
 Bus.$emit('msgBChange',this.msg);
 /script 

三,事件链传递数据

1.父组件 C.vue

 template 
 div 
 h3 事件链传递数据 /h3 
 appA :msg-from-b="msgFromB" v-on:msg-a-change="aSay" /appA 
 appB :msg-from-a="msgFromA" v-on:msg-b-change="bSay" /appB 
 /div 
 /template 
 script 
 import A from '../a3/A'
 import B from '../b3/B'
 export default {
 data () {
 return {
 msgFromA:'A 还没说话',
 msgFromB:'B 还没说话'
 methods:{
 aSay(msg){
 this.msgFromA=msg;
 bSay(msg){
 this.msgFromB=msg;
 components:{
 appA:A,
 appB:B,
 /script 

2.子组件 A.vue

 template 
 div 
 h3 A 模块 /h3 
 p B 说:{{msgFromB}} /p 
 button @click="aSay" A 把自己的信息传给B /button 
 /div 
 /template 
 script 
 export default {
 data () {
 return {
 msg:'我是A',
 methods:{
 aSay(){
 this.$emit('msg-a-change', this.msg)
 pro凡科抠图: ['msgFromB'],
 /script 

3.子组件 B.vue

 template 
 div 
 h3 B 模块 /h3 
 p A 说:{{msgFromA}} /p 
 button @click="bSay" B 把自己的信息传给A /button 
 /div 
 /template 
 script 
 import Bus from '../util/Bus'
 export default {
 data () {
 return {
 msg:'我是B',
 methods:{
 bSay(){
 this.$emit('msg-b-change', this.msg)
 pro凡科抠图: ['msgFromA'],
 /script 

总结

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


推荐阅读

餐馆微信小程序_vue 兄弟组件的信息传递的方法实

vue 弟兄部件的信息内容传送的方式案例详细说明 本文关键详细介绍了vue 弟兄部件的信息内容传送的方式,文中根据案例编码给大伙儿详细介绍的十分详尽,具备一定的参照效仿使...

2021-01-07
郑州铁路局音像记录仪(乘务)采购项目中标结

郑州市铁路线局音像纪录仪(乘务)购置新项目招标結果的公示公告 公布:局物资供应处郑州市铁路线局音像纪录仪(乘务)购置()新项目招标会早已审查完毕,现将招标結果公示公告...

2021-01-07
工信部称谷歌牌照仍在审 谷歌中国在大陆只剩

自6日起,网页页面底端出現“c2010—ICP证合字B2-号”字眼,并连接至国家工信部办理备案网站后台管理系统软件,引起外部“Google已获得ICP续牌”的猜想。国家工信部新闻报道讲话人王...

2021-01-07
济宁小程序如何做_IE11下CKEditor在Bootstrap Modal中下

IE11下CKEditor在Bootstrap Modal中往下拉难题的处理 本文关键详细介绍了IE11下CKEditor在Bootstrap Modal中往下拉难题的处理方式,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照...

2021-01-07
网站优化网站建设对网站的好处有哪些

当一家企业基本建设了一个官方网站以后,期待自身的网站可以在互联网营销推广行业之中产生大量销售业绩。因而,就必须开展技术专业的企业网站建设和营销推广,在互连在网上产...

2021-01-07
20多个出色的蓝色系网站设计

Color wheel pro说:深蓝色是天上和深海的颜色。它经常和深层和平稳相关。它代表着信赖、忠实、智谋、自信心、聪慧、信念、真知与人间天堂。深蓝色被觉得有益于人的心身。它缓解身...

2021-01-07
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信