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 Date对象 学习
Jul 12 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
微信小程序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判断是否是连乘数字串的方法示例
2017/07/03 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
深入探讨前端框架react
2015/12/09 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
bootstrap table小案例
2016/10/21 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
Python常见数据结构详解
2014/07/24 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Python学生信息管理系统修改版
2018/03/13 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
有关Python的22个编程技巧
2018/08/29 Python
Python rstrip()方法实例详解
2018/11/11 Python
Python坐标线性插值应用实现
2019/11/13 Python
Tensorflow累加的实现案例
2020/02/05 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
英国森林假期:Forest Holidays
2021/01/01 全球购物
有个性的自我评价范文
2013/11/15 职场文书
运动会演讲稿300字
2014/08/25 职场文书
联谊活动总结
2014/08/28 职场文书
上下班时间调整通知
2015/04/23 职场文书
论文答辩开场白大全
2015/05/27 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
MySQL基础(一)
2021/04/05 MySQL
Python中常见的导入方式总结
2021/05/06 Python
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
Android studio 简单计算器的编写
2022/05/20 Java/Android