Javascript 我正在使用Vue.js 2.0，我正在尝试从“子组件”发出一个事件`

我正在使用Vue.js 2.0，试图从

子组件

向

父组件

发出一个事件，但它不起作用

您可以在下面看到我的代码：

子组件：

<template>
  <button @click="confirmSendMessage">Send</button>
</template>

<script>
  export default {
    methods: {
      confirmSendMessage () {
        this.$emit('confirmed')
      }
    }
</script>

<template>
    <ConfirmMessage/>
</template>

<script>
    import ConfirmMessage from './ConfirmMessage'
    export default {
        events: {
           confirmed() {
              console.log('confirmed')
           }
        },
        components: {
            ConfirmMessage
        }
   }
</script>

发送
导出默认值{
方法：{
确认发送消息（）{
此.$emit（'已确认'）
}
}

父组件：

<template>
  <button @click="confirmSendMessage">Send</button>
</template>

<script>
  export default {
    methods: {
      confirmSendMessage () {
        this.$emit('confirmed')
      }
    }
</script>

<template>
    <ConfirmMessage/>
</template>

<script>
    import ConfirmMessage from './ConfirmMessage'
    export default {
        events: {
           confirmed() {
              console.log('confirmed')
           }
        },
        components: {
            ConfirmMessage
        }
   }
</script>

从“./ConfirmMessage”导入ConfirmMessage
导出默认值{
活动：{
确认的（）{
console.log（'已确认'）
}
},
组成部分：{
确认信息
}
}

当我点击按钮时，Chrome控制台上没有显示任何内容。

---

我不知道为什么。有人能帮我吗？我是Vue JS的新手。

您错过了侦听发出的事件。用于侦听事件：

<!--                               vv -> call method -->
<ConfirmMessage v-on:confirmed="confirmed" />
<!--                  ^^ -> emitted event -->

---

您必须侦听事件，如果您查看，它将事件名称作为字符串作为第一个参数，然后是要传递给侦听器的值（如果有）

因此，它将是：

<confirm-message :nameOfEvent="functionToExecuteWhenTheEventIsEmitted" />

关于孩子：

this.$emit('nameOfEvent', someValue)

在您的情况下

---

您没有传递值，因此，

这个。$emit（'confirmed'）

和

现在我在控制台上得到了这个值：

属性或方法“confirmed”未在实例上定义，但在呈现过程中引用。请通过初始化属性，确保此属性在“数据”选项中或对于基于类的组件而言是反应性的。

：无需使用该值。这是一个完整的示例，您可以避免它，然后只需使用Vue 2的eventAs名称，您应该使用烤肉串case表示事件名称，否则它将不起作用，如中所述