首頁 Vue 筆記

# 前言

前篇說到，在定義好元件之後，如果元件需要透過「外部」傳入狀態，可以使用 props 來傳遞，同時也提到 props 應該是 readonly 的特性，不該有能力更改外部的狀態。

但如果出現需要將元件的狀態傳遞給外部的情境，或是需要更改外部狀態的情境又該如何處理？

這時就會提到 Vue 中，元件溝通方式的口訣：「Props in, Event out」。

# 定義元件的事件

emit 可以讓我們定義「元件的事件」，透過這個事件我們可以做到兩件事：

  1. 把元件內部的狀態傳出去外部
  2. 讓外部決定事件被觸發時要做的事

第二點就像是我們可以針對某個 HTML 標籤定義 click 事件之後，去做某些事情一樣，可以更改變數資料，可以跳出一個 alert() ，諸如此類。

我們先來定義一個元件吧：

// 宣告實體
const app = Vue.createApp({
  setup() {
    const count = Vue.ref(0);
    return {
      count,
    };
  },
});
// 定義元件
app.component("my-component", {
  template: `
        <div>{{count}}</div>
        <button>增加</button>
      `,
  props: ["count"],
});
app.mount("#app");
<div id="app">
  <my-component :count="count"></my-component>
</div>
很單純的讓外部傳一個數字進去做渲染，並且設定一個按鈕，希望點擊過後數字會增加。


但問題一直就是，我們 不可以 直接在內部改 props，也就是不可以這麼寫：


app.component("my-component", {
  template: `
        <div>{{count}}</div>
        <button>增加</button>
      `,
  props: ["count"],
  setup(props) {
    const plus = () => {
      // 不可以直接改 props！！！！！！
      props.count++;
    };
    return {
      plus,
    };
  },
});
既然 props 是外部傳入的資料，我們可以定義一個 事件，要求外部把資料更新。


定義的方式是這樣，既然是點擊事件要讓數字增加，那麼就讓 內部點擊事件觸發元件的事件。


定義元件的事件，需要在元件的物件中 ，以  emits  屬性來宣告，這能告訴 Vue ，元件有哪些事件名稱。


接著需要在元件內把這個事件放在你想觸發的地方，以上面例子來說，就是 click 事件，所以語法是在 click 事件內寫 emit：  $emit('自己定義一個元件事件名稱')


app.component("my-component", {
  template: `
        <div>{{count}}</div>
        <button @click="$emit('update')">增加</button>
      `,
  props: ["count"],
  // 宣告一個 emits
  emits: ["update"],
});
接著，就是在外層定義「更新資料的事件」：


const app = Vue.createApp({
  setup() {
    const count = Vue.ref(0);
    const updateCount = () => {
      count.value++;
    };
    return {
      count,
      updateCount,
    };
  },
});
最後，在模版中把這兩件事情組合在一起！


<div id="app">
    <my-component :count="count" @update="updateCount"></my-component>
  </div>
完整的程式碼我放這裡


# 把元件內的資料往外傳


延續上面的例子，假使我希望增加的數字不要由外層決定，而是由元件自己定義， $emit('元件事件名稱')  方法可以讓我們把資料往外拋


做法也不難，把資料寫在事件名稱後面就好，假設我希望每點擊一次，外部就把資料 「+ 5」 ，那就把這段 ( $emit('update',5) ) 寫在 click 事件中：


app.component("my-component", {
  template: `
        <div>{{count}}</div>
        <button @click="$emit('update',5)">增加</button>
      `,
  props: ["count"],
  // 宣告一個 emits
  emits: ["update"],
});
外部要接收資料，就是宣告參數來接就好：


const app = Vue.createApp({
  setup() {
    const count = Vue.ref(0);
    //data 參數可以隨意定義，跟元件沒關係
    const updateCount = (data) => {
      console.log(data); // 你可以把資料印出來看看是不是元件丟出來的 5
      count.value += data;
    };
    return {
      count,
      updateCount,
    };
  },
});
完整的程式一樣提供給大家玩玩


# 把 emit 搬到 setup () 裡面撰寫


上面的例子只是單純在元件 click 事件觸發之後，讓外層觸發元件事件來傳遞資料的行為。


不過如果元件事件並不只「單純」的傳遞資料，而是還要做一些複雜的操作，可能就不適合直接把邏輯寫在模板上，這種邏輯內容就規劃上應該要寫在 setup () 之中。


寫法是這樣：


app.component("my-component", {
  template: `
        <div>{{count}}</div>
        <button @click="updateNumber">增加</button>
      `,
  props: ["count"],
  // 宣告一個 emits
  emits: ["update"],
  // 在 setup 加一個 cxt 參數 (名稱也可以隨意定義)
  setup(props, ctx) {
    const updateNumber = () => {
      // 假設固定要把 props.count + 1 的數值傳回外層
      const data = props.count + 1;
      // 這句可以執行 emit 方法
      ctx.emit("update", data);
    };
    return {
      updateNumber,
    };
  },
});
要讓元件的 setup () 使用 emit，需要定義 setup ()  第二個參數，官網定義為  ctx  ，但實際上可以自己定義喜歡的名稱。


這個參數，也可以用解構的方式把 emit 解構出來用：


app.component("my-component", {
  template: `
        <div>{{count}}</div>
        <button @click="updateNumber">增加</button>
      `,
  props: ["count"],
  emits: ["update"],
  // 用解構語法解構 emit
  setup(props, {emit}) {
    const updateNumber = () => {
      const data = props.count + 1;
      emit("update", data);
    };
    return {
      updateNumber,
    };
  },
});
無論如何，就是要在元件中再定義一個方法給去處理執行 emit 之前的邏輯，最後再把這個方法丟去模板中給 click 使用，就是元件模板中的這段：


<button @click="updateNumber">增加</button>
這樣就完成啦，完整的程式放這


# 總結


這篇文章紀錄把元件把訊息告訴外部，以及要求外部更新訊息的方式：emit。


筆者覺得這對新手來說應該會很混亂，至少當時筆者接觸到這個觀念時，有點被外層事件、元件事件搞糊塗。


不過其中的原理，就只是定義元件的「事件」，讓外部去控制事件被觸發時，該做什麼邏輯判斷而已。


如果理解這個觀念後，emit 的用法應該就會變得好懂許多！