Vue3之emits

emits：Vue3中emits類比於Vue2的props，也是傳值，但是Vue2props不能聲明事件，Vue3emits可以聲明事件

//Vue2
<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text']
  }
</script>

//Vue3
<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>

 

這里要注意，Vue3組件可以沒有根元素，但是在組件的組件內觸發事件時，如果為多個代碼片段，沒有根元素包裹，會產生警告，需要對事件定義emits　

//警告代碼
<template>
  <div class="checkout-address">
  </div>
  <x-dialog title="切換收貨地址" v-model:visible="visible">
      <click-btn type="primary" @click="visible = false">確認</click-btn>
  </x-dialog>
</template>

setup(){
    emit("change", showAddress.value && showAddress.value.id); } //修改代碼1 <template> <div class="checkout-address"> <x-dialog title="切換收貨地址" v-model:visible="visible"> <click-btn type="primary" @click="visible = false">確認</click-btn> </x-dialog> </div> </template>  setup(){ emit("change", showAddress.value && showAddress.value.id); } //修改代碼2 <template> <div class="checkout-address"> </div> <x-dialog title="切換收貨地址" v-model:visible="visible"> <click-btn type="primary" @click="visible = false">確認</click-btn> </x-dialog> </template>  emits: ["change"], setup(){ emit("change", showAddress.value && showAddress.value.id); }