Question

Vue.js版本： 2.4.2

组件下方始终将this.$listeners打印为undefined。

module.exports = {
    template: `<h1>My Component</h1>`,
    mounted() {
        alert(this.$listeners);
    }
}

我注册了组件并将其放在父组件中。

有人可以告诉我为什么吗？

Answer 1

您必须了解$listeners是什么。

一旦有组件侦听组件正在发出的事件，

this.$listeners将被填充。

我们假设有两个组成部分：

child.vue - 每次将某些内容写入输入字段时都会发出一个事件。

<template>
    <input @input="emitEvent">
    </input>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('important-event')
      console.log(this.$listeners)
    }
  }
}
</script>

parent.vue - 收听来自child组件的事件。

<template>
  <div class="foo">
    <child @important-event="doSomething"></child>
  </div>
</template>

<script>
import child from './child.vue'

export default {
  data() {
    return {
      newcomment: {
        post_id: 'this is default value'
      }
    }
  },
  components: { child },
  methods: {
    doSomething() {
      // do something
    }
  }
}
</script>

使用此设置，当您在输入字段中键入内容时，应将此对象写入控制台：

{
    `important-event`: function () { // some native vue.js code} 
}

Answer 2

我在我的webpack.config.js文件中添加了以下别名，这为我解决了这个问题：-

A = 0.5, B = 5
A = 1,   B = 6

为什么这个。$听众在Vue JS中未定义？

2 个答案: