关于vue中$emit事件问题

海岛暖风

375205567

发布于
2016-12-04

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

但是我直接写在一起就可以响应

难道是应为this的不同还是？？？

vue.js

阅读 149.3k

6 个回答

✓ 已被采纳

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

我的解决方案是：

新建bus.js

import Vue from 'vue'

export var bus = new Vue()

App.vue里created方法里定义事件

import { bus } from 'bus.js'
// ...
created () {
  bus.$on('tip', (text) => {
    alert(text)
  })
}

Test.vue组件内调用

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

xiguaxigua

89141122

发布于
2016-12-05

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

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

methods: {
    childEventHandler () {}
}

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

锦鲤

708127

发布于
2016-12-04

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

caryhgq

3.5k55284

发布于
2016-12-05

更新于
2016-12-05

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

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

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

AimLuo

18616

发布于
2016-12-26

更新于
2016-12-26

<!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>