iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

30 天我與 Vue 的那些二三事系列 第 11

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中。
成果:
https://ithelp.ithome.com.tw/upload/images/20210926/20128925cXal70z1Qv.png
https://ithelp.ithome.com.tw/upload/images/20210926/201289253SeiSF2TfT.png


上一篇
Day 10 - 元件的資料傳輸(2)
下一篇
Day 12 - 動態組件(Dynamic Components)
系列文
30 天我與 Vue 的那些二三事30

尚未有邦友留言

立即登入留言