2021年2月21日 星期日

【升版指南】Vue 3 宣告事件 emits


Vue 3 新增 emits ,可以宣告需要傳遞到上層的事件名稱,而在 Vue2 時不需要宣告:
<template>
  <div>
    <p v-text="message" />
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>

<script>
  export default {
    props: ['message']
  }
</script>

在 Vue3 要在 emits 加上 accepted,寫法與 props 宣告的方式相似 :
<template>
  <div>
    <p v-text="message" />
    <button v-on:click="$emit('accepted')">
        OK
    </button>
  </div>
</template>

<script>
  export default {
    props: ['message'],
    emits: ['accepted'],
  }
</script>
雖然這個變動不大,但如果元件內忘記宣告,上層會收到兩次的事件觸發,造成非預期性的事件產生。

如同 props ,事件傳遞的資料可以加上驗證 (validator)。假設有個輸入訊息的 message 會透過 Button 點擊送出,期望送出的文字至少要10個字:
<template>
  <div>
    <input v-model="message">
    <button v-on:click="$emit('confirm', message)">
        OK
    </button>
  </div>
</template>

<script>
  export default {
    emits: {
    	confirm: message => message.length > 10,
    },
    data() {
        return {
            message: undefined,
        };
    },
  }
</script>


參考資料:https://v3.vuejs.org/guide/migration/emits-option.html

【升版指南】Vue 3 移除 $listeners 後如何跨元件傳遞事件

從 Vue2 到 Vue3 會有不兼容的特性,需要特別注意,其中跨元件傳遞資料和事件常用的 $attrs$listeners ,就是其中的一項。

在 Vue3 移除 $listeners ,全部改到 $attrs 裡,因此在 Vue2 裡可能會有這種情況:
<template>
  <label>
    <input
        type="text"
        v-bind="$attrs"
        v-on="$listeners">
  </label>
</template>

<script>
  export default {
    inheritAttrs: false
  }
</script>

在 Vue3 ,因為 $listeners 不存在,所有的綁定只要使用 $attrs
<template>
  <label>
    <input
        type="text"
        v-bind="$attrs">
  </label>
</template>

<script>
export default {
  inheritAttrs: false
}
</script>


假設只需要傳遞特定的事件,而非所有的事件,舉例要傳遞的事件是 update-name ,Vue 2 的寫法利用 $listeners 會是:
<template>
   <my-element
       :name="$attrs.name"
       @update-name="$listeners['update-name']" />
</template>

在 Vue3 裡需要加上 on 作為前綴,上層元件就能夠收到事件 update-name
<template>
   <my-element
       :name="$attrs.name"
       @update-name="$attrs['onUpdateName']" />
</template>

參考資料:https://v3.vuejs.org/guide/migration/listeners-removed.html