組件資料傳遞 emit (子傳父)

使用 emit 往上傳遞資料

App.vue

import EmitTest from "@/components/EmitTest.vue";
export default {
  components: {
    EmitTest,
  },
  setup() {
    const clickFn = (num) => {
      console.log(num);
    };
    return {
      clickFn,
    };
  },
};

1	<EmitTest @callBack="clickFn" /> // @在emit定義的變數="父層Fn"

EmitTest.vue

import { onMounted, ref } from "vue";
export default {
  setup(props, context) {
    const num = ref(0);
    onMounted(() => {
      context.emit("callBack", num); // emit(自定義變數, 要使用的參數)
    });
    return {
      num,
    };
  },
};

1	<h1>{{num}}</h1>

setup 接收兩個參數，前面為 props，第二個 context
使用 emit 也可以直接解構出來

setup(props, {emit}){
    const num = ref(0);
    onMounted(()=>{
      emit("callBack", num);
    })
    return {
      num
    }
  }

emits 的使用

聲明有使用到的 emit，可以寫成 Array
emit 也可以寫成 object 來做驗證的動作
如驗證未通過，console 會跳出 warning 的提示來告訴開發者

export default {
  emits: {
    callBack: (num) => {
      return num.value === 0;
    },
  },
  setup(props, { emit }) {
    const num = ref(1);
    onMounted(() => {
      emit("callBack", num);
    });
    return {
      num,
    };
  },
};

計數器範例

App.vue

import EmitTest from "@/components/EmitTest.vue";
export default {
  components: {
    EmitTest,
  },
  setup() {
    const handTimeOut = (num) => {
      console.log("time is over", num.value);
    };
    return {
      handTimeOut,
    };
  },
};

1	<EmitTest @TimeOut="handTimeOut" />

EmitTest.vue

import { onMounted, ref } from "vue";
export default {
  emits: {
    TimeOut: (num) => {
      if (num.value === 0) {
        return true;
      } else {
        return false;
      }
    },
  },
  setup(props, { emit }) {
    const num = ref(5);
    let timer = null;
    onMounted(() => {
      timer = setInterval(() => {
        num.value--;
        if (num.value === 0) {
          clearInterval(timer);
          emit("TimeOut", num);
        }
      }, 1000);
    });
    return {
      num,
    };
  },
};