zoukankan      html  css  js  c++  java
  • vue中兄弟传参(事件总线)

    1、子传父,父传子

    2、vuex

    3、eventBus
    一、子传父,父传子,这个是比较好理解的,但是相对会比较繁琐,只要会用父子通讯和子父通讯就可以完成
    二、vuex的方式,个人使用比较少
    三、事件总线的方式,这个方式相对性价比最高
    使用方式如下
    创建一个js文件,位置放哪都行

    import Vue from 'vue'
    export default new Vue()
    

    把这个文件引入到各个兄弟组件中

    import Bus from '@/components/eventBus';
    

    若实现组件A传给组件B
    组件A中需要传输的参数:

    // 然后在methods里边定义一个函数
    methods:{
        changesize(){
            eventBus.$emit('myMsg',"组建A传输的参数")  //两个参数,参数一是事件名,参数二是传递的参数
        }
    }
    

    组件B中需要接受传输的参数

    // 把接受数据放到生命周期mounted上
    mounted() {
       // 传输方需要异步才不会报错
       Bus.$on('myMsg', myMsg => {  //接受从组件Search/index发送过来的信息
            console.log("我是组件B,接受了组件A发送的数据--->",myMsg )
        });  
        // 原型的函数是
        /*
          Bus.$on('myMsg', function(myMsg){  //接受从组件Search/index发送过来的信息
            console.log("我是组件B,接受了组件A发送的数据--->",myMsg )
          });  
        */
    },
    

    注:在我自己的项目中遇到了一个问题。就是组件A传输参数的时候报错了,提示"Error in event handler for "myMsg": "TypeError: Cannot read property 'clearFilter..."这样的报错,原因应该是传参是没有参数,此时组件A使用异步传参就可以了。

  • 相关阅读:
    spark on yarn 无法提交任务问题
    git rebase 操作撤销
    vim 删除屏蔽行
    mysql 登录远程数据库 失败
    springboot拦截器中获取配置文件值
    根据经纬度获取地址 :位置名称 区 市 省 国家 邮编
    element-ui upload组件上传
    java读写excel文件( POI解析Excel)
    easyui+themeleaf 分页查询实现
    java生成二维码
  • 原文地址:https://www.cnblogs.com/axingya/p/14631365.html
Copyright © 2011-2022 走看看