Question

我正在使用Vue.js 2.0而我正在尝试从child component向parent component发出一个事件，但它无效。

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

子组件：

<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>

当我点击该按钮时，我在Chrome控制台上看不到任何内容。我不知道为什么。有谁能够帮我？我是Vue JS的新手。

Answer 1

你错过了听到发出的事件。使用v-on收听活动：

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

Answer 2

你必须监听事件，如果你看Emit Documentation，它希望作为第一个参数将事件的名称作为字符串，然后是你希望传递给监听器的值（如果有的话）。

所以它将是：

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

方法：

functionToExecuteWhenTeEventIsEmitted(someValue) { //do whatever with someValue}

和孩子：

this.$emit('nameOfEvent', someValue)

在你的情况下

你没有传递价值，所以this.$emmit('confirmed')和<ConfirmMessage :confirmed="confirmed">将会得到它

我正在使用Vue.js 2.0，我试图从`child component`发出一个事件

2 个答案: