Vue-101-Day 14

Prop 的大小寫型態

HTML attribute是沒有區分大小寫的，使用大寫時瀏覽器會自動解析成小寫型態

在 Prop 使用 camelCase 而在 DOM 使用 kebab-case

Vue.component('blog-post2', {
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h1>'
})

new Vue({
  el: '#app-21'
})

<div id="app-21">
  <blog-post2 post-title="Hello Title"></blog-post2>
</div>

Prop 類型

當有多個 Prop 參數時，長得樣子大概跟下述一樣

props: ['postTitle', 'author', 'IsPublished'],

若希望可以列出參數值的型態，可以改寫成如下

props: {
    postTitle: String,
    author: Object,
    IsPublished: Boolean
}

傳遞靜態或動態 Prop

以下就是一個傳遞靜態的 Prop

Vue.component('blog-post2', {
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h1>'
})

new Vue({
  el: '#app-21'
})

<div id="app-21">
  <blog-post2 post-title="Hello Title"></blog-post2>
</div>

傳遞動態 Prop 以及傳遞各種型態數值的方法

Vue.component('blog-post2', {
  props: {
    title: String,
    isPublished: Boolean,
    likes: Number,
    comments: Array,
    author: Object
  },
  template: `
  <div>
    <h3>Hi {{ title }}</h3>
    <span>{{isPublished}}</span>
    <span>{{likes}}</span>
    <span>{{author.name}} {{author.city}}</span>
    <span>{{comments[0]}}</span>
  </div>
  `
})

new Vue({
  el: '#app-21',
  data: {
    post: {
      author: { name: 'David', city: 'Taichung' },
      title: 'Vue101',
      isPublished: true,
      likes: 42,
      comments: [1, 2, 3]
    }
  }
})

<div id="app-21">
  <blog-post2
    :title="post.title + ' by ' + post.author.name"
    :isPublished="post.isPublished"
    :likes="post.likes"
    :author="post.author"
    :comments="post.comments"
  ></blog-post2>
</div>

Prop Validation

Prop 驗證方式：

title: { type: String, required: true }：須為必填字串
likes: { type: Number, default: 100000 }：帶有預設值的數字
comments: [String, Number]：型態需為 String or Number 其中一種
author: { type: Object, default: function() { return { name: ‘Joe’, city: ‘Taipei’ } }：帶有預設值的物件

Vue.component('blog-post2', {
  props: {
    title: { type: String, required: true },
    isPublished: Boolean,
    likes: { type: Number, default: 100000 },
    comments: [String, Number],
    author: {
      type: Object,
      default: function() {
        return { name: 'Joe', city: 'Taipei' }
      }
    }
  },
  template: `
  <div>
    <h3>Hi {{ title }}</h3>
    <span>{{isPublished}}</span>
    <span>{{likes}}</span>
    <span>{{author.name}} {{author.city}}</span>
    <span>{{comments}}</span>
  </div>
  `
})

new Vue({
  el: '#app-21',
  data: {
    post: {
      title: '',
      isPublished: true,
      comments: '123'
    }
  }
})

Non-Prop Attributes

在第三方組件加上自定義的 prop

e.g：在 bootstrap-date-input 這個組件上加上 data-date-picker 這個特性

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

合併或替換 Prop

bootstrap-date-input 的模板如下

<input type="date" class="form-control" />

若在 bootstrap-date-input 組建加上 class 屬性，如下

<bootstrap-date-input
  data-date-picker="activated"
  class="date-picker-theme-dark"
></bootstrap-date-input>

此時 bootstrap-date-input 模板內建的 class(form-control)，並不會被覆蓋，原有的 class 會保留，新的會附加上去

<input type="date" class="form-control date-picker-theme-dark" />

若複寫 type 的話，則會 override

結論：

class、 style：不會覆寫舊有屬性，會添加上去
type：以覆寫的為主

禁止繼承

可以在 Component 設置 inheritAttrs: false，防止元件繼承根元素特性

Vue.component('blog-post2', {
  inheritAttrs: false,
  ...
})

參考資料：

Props

Coding Diary