实例 Vue 使用 $emit() 方法向父组件发送消息，并使用 'message-sent' 自定义事件

<template>

  <h2>Example $emit() Method</h2>

  <p>Message received from child component:</p>

  <p id="pElMsg">{{ message }}</p>

  <child-comp v-on:message-sent="receiveEmit" />

</template>

​

<script>

export default {

  data() {

    return {

      message: ' '

    }

  },

  methods: {

    receiveEmit(msg) {

      this.message = msg;

    }

  }

}

</script>

​

<style>

#pElMsg {

  background-color: lightgreen;

  padding: 10px;

  margin: 0;

  max-width: 350px;

  display: inline-block;

  font-family: 'Courier New', Courier, monospace;

  font-weight: bold;

}

</style>