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_03_javascript全局观
Oct 11 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
百度地图api如何使用
Aug 03 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
vue实现带复选框的树形菜单
May 27 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输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
Jquery ui css framework
2010/06/28 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
多版本Python共存的配置方法
2017/05/22 Python
Python3多线程操作简单示例
2018/05/22 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python简单贪吃蛇开发
2019/01/28 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
python3.8下载及安装步骤详解
2020/01/15 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
应届生污水处理求职信
2013/11/06 职场文书
车间统计员岗位职责
2014/01/05 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
春节晚会主持词
2014/03/24 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
中考学习决心书
2015/02/04 职场文书
2015年少先队活动总结
2015/03/25 职场文书
工程催款通知书
2015/04/17 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android