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


Posted in Javascript onAugust 30, 2019

前言

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

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

<template>
 <div class="a">
  <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.$store.commit('msgAChange', this.msg);
   }
  },
  computed: {
   msgFromB() {
    return this.$store.state.msgFromB;
   }
  }
 }
</script>

4.子组件B.vue

<template>
 <div class="b">
  <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.$store.commit('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 class="a">
  <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 class="b">
  <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 class="c">
  <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 class="a">
  <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)
   }
  },
  props: ['msgFromB'],
 }
</script>

3.子组件 B.vue

<template>
 <div class="b">
  <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)
   }
  },
  props: ['msgFromA'],
 }
</script>

总结

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

Javascript 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 Javascript
微信小程序sessionid不一致问题解决
Aug 30 #Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 #Javascript
Vue函数式组件的应用实例详解
Aug 30 #Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 #Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 #Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 #Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 #Javascript
You might like
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php绘制一条直线的方法
2015/01/24 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
Python获取服务器信息的最简单实现方法
2015/03/05 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
python实现发送邮件功能代码
2017/12/14 Python
python进行两个表格对比的方法
2018/06/27 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
python flask搭建web应用教程
2019/11/19 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
创业计划书模版
2014/02/05 职场文书
校园演讲稿汇总
2014/05/21 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
教师党员整改措施
2014/10/24 职场文书
2015年试用期工作总结
2014/12/12 职场文书
南京南京观后感
2015/06/02 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle