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. 若是有參數要在兩個子組件中傳遞（或共用），可以將該參數設到父組件中，然後再由父組件傳遞給個別子組件。

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器