关于vue中$emit事件问题

在vue+webpack的组件模块结构下 , 我在App.vue这里用this.$on监听相关事件,然后在test组件里调用this.$emit后一直没什么反应

clipboard.png

但是我直接写在一起就可以响应
clipboard.png
难道是应为this的不同还是???

回答:

on和emit的事件必须是在一个公共的实例上,才能触发。

我的解决方案是:

  1. 新建bus.js

    import Vue from 'vue'
    
    export var bus = new Vue()
  2. App.vue里created方法里定义事件

    import { bus } from 'bus.js'
    // ...
    created () {
      bus.$on('tip', (text) => {
        alert(text)
      })
    }
  3. Test.vue组件内调用

    import { bus } from 'bus.js'
     // ...
    bus.$emit('tip', '123')

回答:

按照题主所说的这种逻辑,应该在子组件里面emit,在父组件监听

// app.vue
<template>
  <test @childevent="childEventHandler"></test>
</template>

methods: {
    childEventHandler () {}
}

// test.vue
methods: {
    emitEvent () {
      this.$emit('childevent'/* , this.somedata */)
    }
}

回答:

$emit 触发当前实例上的事件。 你在App.vue里监听,test.vue里触发当然监听不到啊,$emit

回答:

你可以使用一个空的 Vue 实例作为中央事件总线:

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

回答:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app1">
        <component-a></component-a>
        <component-b></component-b>
    </div>
</body>

</html>
<script src="lib/vue2.0/vue.js"></script>
<script>
let bus = new Vue()
let componnetA = {
    template: '<button v-on:click="aa">1</button>',
    data(){
        return{
            meg: 0
        }
    },
    methods:{
        aa: function(){
            bus.$emit('aa', this.meg++)
        }
    }
}
let componentB = {
    template: '<button>2</button>',
    mounted() {
        bus.$on('aa', function(text){
            console.log('我是由组件1传过来的' + text)
        })
    }
}
let app1 = new Vue({
    el: '#app1',
    components: {
        componentA: componnetA,
        componentB: componentB
    }
})
</script>

回答:

使用 eventHub 来中转事件

dispatch-和-broadcast-替换

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注