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 相关文章推荐
利用javascript查看html源文件
Nov 08 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
原生js编写焦点图效果
Dec 08 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 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
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
Python中的pass语句使用方法讲解
2015/05/14 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
详解Python 函数参数的拆解
2020/09/02 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
大三在校生电子商务求职信
2013/10/29 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
班级心理活动总结
2014/07/04 职场文书
预备党员表决心的话
2015/09/22 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书