Vue $emit $event 傳值（子to父）

事件名

始終使用 kebab-case 的事件名。

通過事件向父組件發送信息

子組件中EnFontsize.vue中$emit

 <button @click="$emit('enlarge-text')">Enlarge text</button>

父組件

<template>
  <div id="app">
    <div :style="{ fontSize: postFontSize + 'em' }">
      <div v-for="post in posts" v-bind:key="post.id" v-bind:post="post">
        <span>{{post.id}}</span>
        <span>{{post.title}}</span>
        <EnFontsize v-on:enlarge-text="postFontSize += 0.1"></EnFontsize>
      </div>
    </div>
  </div>
</template>

<script>
import EnFontsize from "./components/EnFontsize";

export default {
  name: "App",
  data: function() {
    return {
      posts: [
        { id: 1, title: "the title is..." },
        { id: 2, title: "the title is..." }
      ],
      postFontSize: 1
    };
  },
  components: {
    EnFontsize
  }
};
</script>

使用事件拋出一個值

子組件中使用 $emit 的第二個參數來提供這個值：

 <button @click="$emit('enlarge-text', 0.1)">Enlarge text</button>

父組件中可以通過 $event 訪問到被拋出的這個值：

 <EnFontsize v-on:enlarge-text="postFontSize += $event"></EnFontsize>

或者，如果這個事件處理函數是一個方法：

<!-- <EnFontsize v-on:enlarge-text="postFontSize+=$event"></EnFon>-->
    <EnFontsize v-on:enlarge-text="onEnlargeText"></EnFontsize>

那么這個值將會作為第一個參數傳入這個方法：

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

注意：這里是自動接收這個值並傳給函數作為第一個參數，雖然沒有使用$event接收