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 相关文章推荐
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
Vue 换肤的示例实践
Jan 23 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
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
React diff算法的实现示例
2018/04/20 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
举例讲解Python中is和id的用法
2015/04/03 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
八年级音乐教学反思
2014/01/09 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
汽修专业自荐信
2014/07/07 职场文书
教师年度考核个人总结
2015/02/12 职场文书
法律意见书范文
2015/05/20 职场文书