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

書籍目錄

快速登入

計數器