iT邦幫忙

0

Vue Props

大綱

  • 頁面 引入 元件
  • 使用 Props 父傳子
  • Props 應用 (傳入參數的差異 v-bind使用與否)
  • Props 傳址問題 (data初始化、computed運算)
  • Props 新增、替換元件屬性
  • Props 進階應用 (自定檢查建構式)

如何使用 Props

引入元件

  • 注意 建議 元件名稱用 多個單詞組成,避免未來與 HTML 相衝 (編譯時)
  • 多字詞屬性使用 user-name 連接,而非使用小鴕峰
  1. 建立 xxx.vue檔 於 src/components/HelloWorld.vue檔
  2. 於 views/Home.vue (頁面檔) 引入
  // @ 會指向 /src  (webpack編譯時幫你導向)
  import HelloWorld from '@/components/HelloWorld.vue' 

  export default{
    components: {
      HelloWorld,   // 對應引入的名稱,此名稱亦用於 template
    }
  }

父傳子 Props

  • 去看 Props 使用手冊文章
  • 多字詞屬性 使用 - 串接,而非使用小鴕峰寫法
  • 於 頁面檔 template 中使用,給予屬性就會以 Props的方式往下傳遞
  <!--  傳遞純文字  -->
  <HelloWorld user-name="Welcome to Your Vue.js App" />
  
  <!--  動態附值  利用 v-bind: 就可以帶入 view 的 參數 -->
  <HelloWorld :user-name="post.title + ' by ' + post.author.name" />
  1. 子元件以 Props 接收
  • 盡可能的寫詳細,避免出錯,當型別錯誤會被偵測到
  export default {
   props: {
      src: {
        type: String,
        required: true,
        default: () => { message: "test"; },
        // 必須符合陣列中的值 才會通過
        validator: value => { ["test"].indexOf(value) !== -1; }
      }
    }
  }

Props 使用手冊

大綱

  • Props 應用 (傳入參數的差異 v-bind使用與否)
  • Props 傳址問題 (data初始化、computed運算)
  • Props 新增、替換元件屬性
  • Props 進階應用 (自定檢查建構式)

Props 應用 使用各型別

  • 靜態值 使用 "" 即可

  • 動態值(有用到變數的) 使用 v-bind:title="post.title"

  • 會被視為表達式,須要使用 v-bind者: 數字、布林、陣列、物件

  • 布林值,預設為true(免v-bind)

  <!-- 可不代入值,預設為true,不使用 v-bind -->
  <blog-post is-published></blog-post>
  <!--    -->
  <blog-post v-bind:is-published="false"></blog-post>
  <blog-post v-bind:is-published="post.isPublished"></blog-post>

Props 傳入物件,不需要一個屬性一個屬性指定

  • 使用 v-bind 關鍵字 直接帶入物件
  <!--  使用 v-bind 關鍵字 直接帶入物件  -->
  <blog-post v-bind="post"></blog-post>
  
  <!-- 上面的會被編譯成如下 -->
  <blog-post
    v-bind:id="post.id"
    v-bind:title="post.title"
  ></blog-post>

Props 注意事項

  • 注意 JS 利用 Props 傳遞 陣列、物件是傳參考,因此元件改動會影響到父元件
  • 應去避免更動 Props 本身,將其利用 computed 建立新的值在做操作
  // 狀況1: 將 Props 設為本地要使用的值,將其用 data 保存在對其操作
  props: ['initialCounter'],
  data: function () {
    return {
      counter: this.initialCounter
    }
  }
  
  // 狀況2: 純粹要對 Props 做運算處理,使用 computed
  props: ['size'],
  computed: {
    normalizedSize: function () {
      return this.size.trim().toLowerCase()
    }
  }

Props 參數應用

  • 當 Props 未符合時會給予通知 (生產環境下)
  • 使用 default & validator 無法取得 data & computed 值
  • 因 Props 驗證跟產生,是在 beforeCreated 階段 (此時還未產生 data)
  export default {
    props: {
      msg: {
        // null 和 undefined 會通過任何型別
        type: String, // 不建議多個
        required: true,
        // default: "test"
        // default 可使用 Function 產生或直接給予值
        default: function() {
          return { message: "hello" };
        },
        validator: function(value) {
          // 必須符合陣列中的值 才會通過
          return ["success", "warning", "danger"].indexOf(value) !== -1;
        }
      }
    }
  };

Props 新增、替換元件屬性

現有一個 input (SomeForm) 已有 type & class 屬性想要替換他們,我們想將其 type 改成 text & 將其 class 新增 padding

  • 我們利用 Props 傳入值 新增、替換元件的屬性值 (不使用 v-bind)
  • class 與 style 較智能,會將兩者值合併
  • 若要覆蓋 class, style 建議使用 props default,當有傳入值時使用傳入值
  <!--  元件  -->
  <input type="date" class="form-control">
  
  <!--  目標  -->
  <input name="123" type="text" class="form-control p-5">
  
  <!--  父元件傳送 Props  -->
  <some-form name="123" type="text" class="p-5"></some-form>

Props 進階應用

參照文檔 Type Checks 或 类型检查

  • type:String 為原生構造函式,亦可自行定義,來檢測某物件是否為某建構式建造
  • 禁用特性繼承 (有看沒懂..)

尚未有邦友留言

立即登入留言