vue非父子组件之间传值

代码地址:https://github.com/kedaya-github/vue_front , vue_front01中

组件通信:

  • 父向子,子向父。翻看 vue学习篇–组件,文档。

非父子组件之间

  • 在components中定义一个公共的 bus.js文件,里面封装一个vue对象

      // 创建一个Vue实例
      import Vue from 'vue'
      
      export default new Vue()
    

在这里插入图片描述

  • components——>GG.vue : 两个没有关系的路由组件

      <template>
        <div>
            哥哥组件:
            <input type="button" value="发送信息到 MM" @click="sendMsg()">
        </div>
      </template>
      <script>
      import bus from './bus.js';   //引入 bus.js , 使用bus向 MM 路由组件传值
      export default {
        data() { 
          return {
              ggMsg : "哥哥组件信息"
          }
        },
        methods:{
            sendMsg(){
                bus.$emit("GGMM" , this.ggMsg , "测试多数据");  //调用bus.$emit() 绑定一个事件 , 第二个参数为 要传递的数据
            }
        },
       }
      </script>
    
  • components——>MM.vue : 接收 GG.vue 传递的数据

      <template>
        <div>
            MM组件:
            GG组件的信息 : {{mmMsg}}
        </div>
      </template>
      <script>
      import bus from './bus.js';
      export default {
        data() { 
          return {
              mmMsg : ""
          }
        },
        created(){  //初始化数据时,获取GG组件 传递的数据
              bus.$on("GGMM" , (data,msg) => {   //bus.$on 来获取非父子组件传递的数据  第一个参数为共同绑定的事件  , data为传递的数据, 
                  console.log(msg);  //() 中可以传递多值
                  this.mmMsg = data; 
              })
        }
       }
      </script>
    

总结:

  1. 非父子组件的传值,也可以使用 vuex进行传值。但是使用bus更加规范。
  2. 两个传值的组件,都需要 import bus from “bus.js”,引入 bus对象。使用bus的方法进行传值
  3. 可以传递多值。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值