zoukankan      html  css  js  c++  java
  • vue中eventbus 多次触发的问题

      
    相比于react,vue是一个更上手很快的框架。所说简单易用,但在做Vue项目的过程中,就会发现,坑还是有的。
    组件之间传递数据是一个常见的需求,父子组件传递数据在官网有介绍,除了父子组件,一般地,任意组件之间传递数据无非2种方式:
    1.vuex
    2.eventbus
    一般地,小项目中建议用eventbus,具体怎么用呢?
    main.js
    var bus = new Vue()
    
    // in component A method
    bus.$emit('select', 1)
    
    // in component B created hook
    bus.$on('select', function (id) {
        console.log('B页面打印:'+id);//1
    })
    
    // in component C created hook
    bus.$on('select', function(id){
        console.log('C页面打印:'+id);//1
    })
    这样就没有问题了吗?
    如果只在B页面监听事件,那没有问题(起码表现上)。
    如果在B,C2组件监听事件,那就有问题了。只要C组件的页面打开过,在B组件的页面触发事件,C组件页面的监听函数也执行了。讲道理,C页面此时已经销毁了。
    我们试一下:先打开C的页面:

     

    接下来,我们打开B的页面:

    这真真让人迷惑。
    vue的作者在git上回答过,解决办法:
    在监听的B,C组件beforeDestroy()生命周期函数里取消监听:
    beforeDestroy () {
        bus.$off('select',this.handle)
    }
    

     

    这时候,匿名函数就不行了。,C组件在监听的时候,回调函数改成具名函数:
    bus.$on('select',this.handle)
    

      

    本文的出问题写法,完整文件:

    A.vue

    <template>
        <div class="help-page">
            <p @click="click"">A</p>
        </div>
    </template>
    
    <script type="text/javascript">
        export default{
            data(){
                return{
    
                }
            },
            created(){
    
            },
            methods:{
                click(){
                    bus.$emit('select', 1)
                }
            }
        }
    </script>
    <style lang="less">
    
    </style>
    

      

    B.vue

    <template>
        <div class="help-page">
            <A></A>
            <p>B</p>
        </div>
    </template>
    
    <script type="text/javascript">
        import A from './A.vue'
        export default{
            data(){
                return{
    
                }
            },
            created(){
                bus.$on('select', function(id){
                    console.log('B页面打印:'+id);
                })
    
            },
            components:{
                A
            },
            methods:{
    
            }
        }
    </script>
    <style lang="less">
    
    </style>
    

      

    C.vue

    <template>
        <div class="help-page">
            <A></A>
            <p>C</p>
        </div>
    </template>
    
    <script type="text/javascript">
        import A from './A.vue'
        export default{
            data(){
                return{
    
                }
            },
            created(){
                bus.$on('select', function(id){
                    console.log('C页面打印:'+id);
                })
    
            },
            components:{
                A
            },
            methods:{
    
            }
        }
    </script>
    <style lang="less">
    
    </style>
    

      

  • 相关阅读:
    COGS 859. 数列
    9.7noip模拟试题
    hash练习
    9.6noip模拟试题
    9.5noip模拟试题
    poj 2117 Electricity
    洛谷P1993 小 K 的农场(查分约束)
    9.2noip模拟试题
    洛谷 P1273 有线电视网(dp)
    面试题收集
  • 原文地址:https://www.cnblogs.com/xiaochongchong/p/8127148.html
Copyright © 2011-2022 走看看