:::

5. 父組件→子組件間的參數傳遞(props)

  1. 父組件:利用 <PropsTest :msg="data" /> 將參數傳到 PropsTest 組件
    <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 給樣板中呼叫使用
    <script>
    export default {
      props:{
        msg:{
          type: String,
          default: '我是預設文字'
        }
      },
      setup(props) {
        return { props };
      },
    };
    </script>
    
    <template>
      <h1>{{ props.msg }}</h1>
    </template>
  3. 定義 props 有以下方法:(注意,若型別是 [陣列] {物件},要用函式的方式去設定預設值,{物件} 更必須 return 一個預設的物件才行)
    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%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1737

計數器

今天: 2659265926592659
昨天: 3755375537553755
總計: 4458498445849844584984458498445849844584984458498