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使用异步传参就可以了。

  • 相关阅读:
    Linux 禁用ipv6
    【搬运】Get Log Output in JSON,通过Log4j2与Logback输出JSON格式日志
    Gnome禁用tracker-miner-apps、tracker-miner-fs、tracker-store
    Sentry错误日志监控你会用了吗?
    django执行源生的mysql语句
    django实现自定义manage命令的扩展
    C++教程详解
    python数据分析教程大全
    将mysql主键id从1开始 变为自增
    django restful framework教程大全
  • 原文地址:https://www.cnblogs.com/axingya/p/14631365.html
Copyright © 2011-2022 走看看