Question

我是vue.js的新手，正在尝试了解如何使用$emit。在下面的代码中，除最后一个元素外，每个input元素都按预期工作。

我在最后一个input元素中的假设是，使用事件名称调用$emit与调用具有该事件名称的函数相同，但不会调用该函数。 $ emit发生了什么事？

我已经阅读了Binding Native Events to Components，这表明它在使用时的用法有所不同。所有这些方法都是从我观看YouTube视频（7个秘密模式...）开始的，特别是在此时https://youtu.be/7lpemgMhi0k?t=21m57s，您可以在幻灯片上看到这种用法。

这是JSFiddle https://jsfiddle.net/sbtmfweq/

中的代码

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<div id="test-app">
  <input v-model="text1" placeholder="edit me" @keyup.enter="submit"> {{ text1 }}
  <br><br>
  <input :value="text2" @input="inputEvent" @keyup.enter="submit"> {{ text2 }}
  <br><br>
  <input :value="text2" @input="inputEvent($event)" @keyup.enter="submit"> {{ text2 }}
  <br><br>
  <input :value="text2" @input="$emit('inputEvent', $event.target.value)"> {{ text2 }} | {{reversedText2}}
</div>

<script>

  new Vue({
    el: '#test-app',
    data: {
      text1: 'text1',
      text2: 'text2',
    },
    methods: {
      log: console.log,
      submit: function(event) {
        console.log("submit -->", event, event.target.value, '<--')
      },
      inputEvent: function(event) {
        console.log("input 2 -->", event.target.value, '<--')
        this.text2 = event.target.value
      },
    },
    watch: {
      text1: {
        handler: function(newValue, oldValue) {
          console.log("input 1 -->", newValue, '<-->', oldValue, '<--')
        }
      }
    },
    computed: {
      reversedText2: function () {
        return this.text2.toUpperCase()
      }
    }
  })

</script>

Answer 1

这只是一个简单的问题。每当您调度事件时，都必须向其添加侦听器。在$ emit中，第一个参数实际上是事件的名称。

按照文档中$ emit的要求编写。

vm。$ emit（eventName，[…args]）

在下面的代码中，我使用$ on添加了一个事件侦听器。另外，我还更改了$ emit的arg。

  <input :value="text2" @input="$emit('inputEvent', $event)"> {{ text2 }} | {{reversedText2}}

<script>

  new Vue({
    ...
    created(){
        this.$on('inputEvent', this.inputEvent);
    }
    ...
  })

</script>

希望对您有帮助。

Answer 2

$emit的工作原理是这样。

假设您有两个组件，<parent>和<child>，其中<child>在<parent>的模板中。

<child>发出事件时，只能由<parent>组件处理（除非您通过$on注册了一个侦听器，但这与您的情况无关）。在您的代码中，$emit调用是在父组件的范围内执行的（父组件是用new Vue()实例化的根组件）；也就是说，父组件是发出事件的组件。根组件没有父组件，因此发出调用毫无意义。

我在最后一个input元素中的假设是，使用事件名称调用$emit与调用具有该事件名称的函数相同，但是不要调用该函数。

这不是事实；事件的名称与在父级中注册为该事件的侦听器的方法无关。

Answer 3

在您的情况下，$emit无效是正常的。

实际上，$emit用于父子组件之间的通信。在这里，您正在使用$emit，但尚未定义任何父组件。

这是自定义事件的docs。

希望有帮助！

使用$ emit调用函数

3 个答案: