XOOPS輕鬆架 - 線上書籍

:::

Vue.js 3.0 筆記
=============

1. 子組件：倒數計時組件，預設5秒，0秒時停止 
  ```markup
  <script>
  import { onMounted, ref } from "vue";
  
  export default {
    emits: {
      TimeOut: (num) => {
        return num.value === 0;
      },
    },
    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,
      };
    },
  };
  </script>
  
  <template>
    <h1>{{ num }}</h1>
  </template>
  
  <style lang="scss" scoped>
  </style>
  ```
  
  
  1. 可以先在 `emits:{}` 中定義要傳什麼東西到父組件（沒設也行），也就是要送到父組件的函式，可以在裡面做參數的驗證。
  2. 在 `setup(props, { emit }) {}` 中從 `context` 解構出 `emit` 功能，並在掛載後將 `TimeOut` 函數及 `num` 值透過 `emit` 傳送到父組件
2. 父組件 
  ```markup
  <script>
  import TimerBox from "@/components/TimerBox.vue";
  
  export default {
    components: {
      TimerBox,
    },
    setup() {
      const handleTimeOut = (num) => {
        if (num.value === 0) {
          console.log("時間到：", num.value);
        }
      };
      return {
        handleTimeOut,
      };
    },
  };
  </script>
  
  <template>
    <TimerBox @TimeOut="handleTimeOut" />
  </template>
  
  <style>
  </style>
  
  ```
  
  
  1. 當子組件將` TimeOut` 函數及 `num` 值 `emit` 到父組件時，就會觸發 `<TimerBox @TimeOut ="handleTimeOut" />` 中的 `@TimeOut`事件，同時會執行 `handleTimeOut `函式
  2. 父組件要在 `setup(){}` 中定義好 `handleTimeOut `函式的內容並 `return` 出來
 
實際範例：

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1738

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器