XOOPS輕鬆架 - 線上書籍

:::

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

1. 父組件：利用 `<PropsTest :msg="data" />` 將參數傳到 `PropsTest` 組件 
    ```markup
    <script>
    import PropsTestfrom "@/components/PropsTest.vue";
    import { ref } from "vue";
    
    export default {
      components: {
        PropsTest,
      },
      setup() {
        const data= ref('我要傳到子組件');
        return { data };
      },
    };
    </script>
    
    <template>
      <PropsTest :msg="data" />
    </template>
    ```
2. 子組件：在組建中定義 `props` 物件，並傳入 `setup()` 中，再 `return` 給樣板中呼叫使用 
    ```markup
    <script>
    export default {
      props:{
        msg:{
          type: String,
          default: '我是預設文字'
        }
      },
      setup(props) {
        return { props };
      },
    };
    </script>
    
    <template>
      <h1>{{ props.msg }}</h1>
    </template>
    ```
3. 定義 props 有以下方法：（注意，若型別是 `[陣列]` 跟` {物件}`，要用函式的方式去設定預設值，`{物件} `更必須 return 一個預設的物件才行） 
    ```javascript
    props: {
        // 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
        propA: Number,
    
        // 多個可能的類型
        propB: [String, Number],
    
        // 必填的字符串
        propC: {
            type: String,
            required: true
        },
    
        // 帶有默認值的數字
        propD: {
            type: Number,
            default: 100
        },
    
        // 帶有默認值的陣列
        propE: {
            type: Array,
            // 對象或數組默認值必須從一個工廠函數獲取
            default: () => []
        },
    
        // 帶有默認值的對象
        propF: {
            type: Object,
            // 對象或數組默認值必須從一個工廠函數獲取
            default: ()=> ({})
        },
    
        // 具有默認值的函數
        propG: {
            type: Function,
            // 與對象或數組默認值不同，這不是一個工廠函數 —— 這是一個用作默認值的函數
            default: ()=> {}
        },
    
        // 自定義驗證函數
        propH: {
            validator: function(value) {
                // 這個值必須匹配下列字符串中的一個
                return ['success', 'warning', 'danger'].indexOf(value) !== -1
            }
        }
    }
    ```
4. 若是有參數要在兩個子組件中傳遞（或共用），可以將該參數設到父組件中，然後再由父組件傳遞給個別子組件。

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器