[Day24]元件事件的傳遞

2023 iThome 鐵人賽

DAY 24

自我挑戰組

從零開始Vue(View)系列第 24 篇

15th鐵人賽

yuuu

2023-09-28 18:50:06

225 瀏覽

分享至

昨天說到，父元件向子元件傳遞資料是用props，若子元件內部發生事件或要將自己的資料傳遞給父元件則使用Vue實體的方法emit。
語法（子元件程式JS）：
this.$emit(事件名稱 , 傳遞的資料)

父層接收元件事件和監聽DOM事件一樣，都是用v-on來接收（監聽）
語法（父元件樣板HTML）：
＜子元件名稱 v-on:事件名稱=”處理方法名稱”＞＜子元件名稱＞

而傳遞資料是在父元件中建立methods中建立事件處理方法帶入的參數：
語法（父元件程式JS）：

methods:{
	處理方法名稱(傳遞資料){
    },
},

上面太複雜，直接看範例：
目標：將子元件的資料或事件傳遞給父元件

ChildComponent.vue

<template>
  <div>
    <button @click="emitEvent">觸發事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      // 使用 $emit 觸發自定義事件
      this.$emit('custom-event', '這是一個自定義事件的內容');
    }
  }
};
</script>

ParentComponent.vue

<template>
  <div>
    <p>父元件：{{ message }}</p>
    <!-- 在父元件中使用 @custom-event 監聽自定義事件 -->
    <ChildComponent @custom-event="handleCustomEvent"></ChildComponent>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleCustomEvent(payload) {
      // 處理自定義事件
      this.message = `收到自定義事件[${payload}]`;
    }
  }
};
</script>

main.js

import { createApp } from 'vue';
import ParentComponent from './ParentComponent.vue';
import ChildComponent from './ChildComponent.vue';

var app = createApp(ParentComponent);

app.component('ChildComponent', ChildComponent);

app.mount('#app');

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Vue 3 $emit 實例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3.2.33/dist/vue.global.js"></script>
</head>
<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>
</html>

也可以都在html裡，只是這樣比較難管理元件及重複利用

<!DOCTYPE html>
<html>
<head>
  <title>Vue 3 $emit 實例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3.2.33/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <parent-component></parent-component>
  </div>

  <script>
    // 創建Vue實例
    var app = Vue.createApp({});

    // 定義子元件
    app.component('child-component', {
      template: `
        <div>
          <button @click="emitEvent">觸發事件</button>
        </div>
      `,
      methods: {
        emitEvent() {
          // 使用 $emit 觸發自定義事件
          this.$emit('custom-event', '這是一個自定義事件的內容');
        }
      }
    });

    // 定義父元件
    app.component('parent-component', {
      template: `
        <div>
          <p>父元件：{{ message }}</p>
          <!-- 在父元件中使用 @custom-event 監聽自定義事件 -->
          <child-component @custom-event="handleCustomEvent"></child-component>
        </div>
      `,
      data() {
        return {
          message: ''
        };
      },
      methods: {
        handleCustomEvent(payload) {
          // 處理自定義事件
          this.message = `收到自定義事件[${payload}]`;
        }
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

執行結果：

說明：
建立兩個元件分別為父元件（ParentComponent）和子元件（ChildComponent）。

子元件（ChildComponent）：
設一個按鈕，當觸發按鈕時，它會呼叫emitEvent方法，這個方法使用$emit觸發一個名為custom-event的自定義事件，同時傳遞了一個字串（'是一個自定義事件的內容'）作為事件的內容。

父元件（ParentComponent）：
這個父元件包含一個段落元素（<p>），其中的內容是由message屬性控制的。
在資料模型（data）中先設定內容為空的字串。
父元件中也包含了一個子元件<ChildComponent>，並使用@custom-event（也等於v-on:custom-event）來監聽子元件觸發的自定義事件。當自定義事件被觸發時，父元件會調用handleCustomEvent方法，這個方法將事件的內容更新到message屬性中，以便在畫面上顯示。