Vue3 CompositionAPI 組合式API 子組件向父組件傳遞數據（通信）

Vue3 CompositionAPI 組合式API 子組件向父組件傳遞數據（通信）

傳遞給 setup 函數的第二個參數是 context。context 是一個普通的 JavaScript 對象，它暴露三個組件的 property：attrs,slots和emits，其中emit就是Vue2中的$emit方法

現在使用Vue3風格和組合式API方式完成，
假設父組件為Collection.vue，子組件為NavBar.vue(注冊模板后寫作 )
那么需要在子組件NavBar.vue中定義

<script>
export default {
  name: "NavBar",
  emits:['todata'], /*定義列表*/
  , setup(props,ctx) {
  const params = {
        user:"ylw"
      };
      ctx.emit("todata", params); //暴露的事件和傳遞的參數
}
<script>

在父組件Collection.vue中這樣寫

<templatet>
  <div>
    <nav-bar @todata="getChildData"></nav-bar> /*父組件接收到事件和參數並且使用方法承接*/
  </div>
</template>
<script>
export default{
   name: "Collection",
   setup(){
       const getChildData = (params)=>{
           console.log(params);
      }
      return {getChildData}
   }

</script>

加載Collection組件后顯示在控制台顯示子組件中取到的數據：

注意，在父組件的template域仍然可以支持使用$emit方法分發事件