【Vue】关于vue中$emit事件问题

Z时代
2024-01-10
分类：技术分享

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

但是我直接写在一起就可以响应
【Vue】关于vue中$emit事件问题
难道是应为this的不同还是？？？

回答

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')

按照题主所说的这种逻辑，应该在子组件里面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="https://segmentfault.com/q/1010000007688303/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>