使用$emit调用函数

Question

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

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

我已经阅读过将本机事件绑定到组件，这表明它将在我所做的工作中被不同的使用。所有这些方法都是从我观看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，但是还没有定义任何父组件。

以下是定制事件的文档。

希望能帮上忙！