Day 11 - 自订事件

昨天我们介绍了props的用法，要注意的是，props是单向数据流，所以只能从上传到下，要由下传到上的话要使用$emit自订事件。

<template>
  <div id="app">
    <eventComponent @my-event="action"></eventComponent>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    action(value) {
      alert(value);
    },
  },
  components: {
    eventComponent: {
      template: `
        <div>
          <button @click="onClick">button</button>
        </div>
      `,
      methods: {
        onClick() {
          this.$emit("my-event", "123");
        },
      },
    },
  },
};
</script>

我们先建立一个元件eventComponent，侦听button的click事件并绑定methods里的onClick方法，而这个方法透过$emit发出一个名为my-event的事件，在HTML模板使用v-on:事件名称去接收事件後，执行Vue实例内的function。
如此一来，我们可以自己定义事件内容，看是要触发甚麽类型的行为等等。

按下button後，便把"123"传入alert中。
成果: