Vue.js 使用$emit调用函数

我是vue.js的新手，正在尝试了解如何使用

$emit

。在下面的代码中，除最后一个元素外，每个

输入元素都按预期工作

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

我已经通读了一遍，这表明在我做这件事的时候，它的用法是不同的。所有这些方法都是从我观看YouTube视频（7种秘密模式…）开始的，特别是在这个时候，你可以在幻灯片上看到这种用法

下面是JSFIDLE中的代码


{{text1}}



{{text2}



{{text2}



{{text2}}{{reversedText2}}
新Vue({
el:“#测试应用程序”，
数据：{
text1:'text1'，
text2:'text2'，
},
方法：{
日志：console.log，
提交：功能（事件）{
console.log（“submit-->”，event，event.target.value，”在您的情况下，
$emit
不起作用是正常的

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

以下是自定义事件的详细信息

希望能有所帮助！
这只是一个简单的问题。无论何时发送事件，都必须向其添加侦听器。在$emit中，第一个参数实际上是事件的名称

如文档中为$emit编写的

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

<script>

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

</script>

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

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

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

<script>

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

</script>

{{text2}}{{reversedText2}
新Vue({
...
创建（）{
this.$on（'inputEvent'，this.inputEvent）；
}
...
})

我希望它能有所帮助。
$emit
就是这样工作的

假设您有两个组件，
和
，其中
位于
的模板内

当
发出事件时，它只能由
组件处理（除非您通过
$on
注册侦听器，但这与您的场景无关）。在您的代码中，
$emit
调用在父组件（即用
新Vue（）实例化的根组件）的范围内执行
）；也就是说，父组件是发出事件的组件。根组件没有父组件，因此发出调用没有意义

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

这不是真的；事件的名称与在父级中注册为该事件侦听器的方法无关。
因此，
$emit
与发布到pubsub系统的内容不同，在pubsub系统中，
方法中的函数会自动订阅到该系统？它仅用于子级到父级的通信有什么特别的原因让我应该避免使用这种模式，而使用上一种模式上面使用的三种方法中的一种，或者这是
$emit
的完美/有效用法吗？我之所以这样问，是因为它没有在子-父上下文中使用。这确实是我想要的。我喜欢$emit事件名称和要使用的函数之间的解耦被调用。老实说，在这种特殊情况下，您应该避免使用所有四个。Vue使用v-model提供双向绑定。我认为这是最好的方式。请参阅我已修改了您的小提琴。编辑：这与第一个一样，添加了一个
：值
（我还添加了一个手表，只是想看看是否有办法获得代码中的更改通知）很抱歉：不需要value，只有v-model可以工作。除非您想与父组件通信或使用服务（角度样式），否则使用$emit和$on是不正常的。