Day 03: 組件 Prop + Slot + 仿造 BootstrapVue <b-button>

第 12 屆 iThome 鐵人賽

DAY 3

Modern Web

Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理系列第 3 篇

12th鐵人賽

五百億

團隊自討苦吃三十天#像極了愛情

2020-09-11 10:38:24

1508 瀏覽

分享至

Prop 是拿來做什麼呢 ? 是我們註冊完一個組件並定義好內容後，可以從父層 ( HTML標籤使用處 ) 透過 Tag Attribute 的方式傳遞資訊給子層定義的 Prop，如果硬要講 Prop 是什麼的話，那大概就是HTML標籤的客製化屬性了吧，這裡我依照 "想讓使用者傳入的屬性來定義子層 Prop " 這個概念來製作我們的組件。

再正式開始說 Prop 之前，先偷渡一下尋找實感，讓我們先偷看下面這段 BootstrapVue 的 Code。

<div>
  <b-button>Button</b-button>
  <b-button variant="danger">Button</b-button>
  <b-button variant="success">Button</b-button>
  <b-button variant="outline-primary">Button</b-button>
</div>

這是這段 Code 的效果

有沒有看見 <b-button> ，這就是 BV 自己做的組件啦。
稍微回顧怎麼註冊自己要用的組件

// 1. 全域註冊
Vue.component('name-generator', {})

// 2. 局部註冊
let nameGeneratorHeHe = {...}

new Vue({
	...
  components: {
	nameGeneratorHeHe 
  }
})

如此

<name-generator></name-generator>
<name-generator-he-he></name-generator-he-he>

本章就要來模仿實作 BV 的 b-button ，在這之前我們要先來學習 Prop 的部份，首先註冊一個組件，我這邊選擇用全域註冊，並為組件添加一個 template 以及 props。
props 可以依照需求有不同寫法 ( 三種依狀況取用 )

// 避免混淆， 我取名叫 m-button 表示 my-button
Vue.component('m-button', {
	template: `
		<div class="button">
			<button type="button"></button>
		</div>
	`,

	// 第一種，單純一個陣列表示所有可傳給子組件的prop
	props: ['variant', 'text', 'other']

	// 第二種，以物件形式定義傳入 prop 的型別
	props: {
	  variant: String,
	  text: String,
	  other: ['String', 'Array', 'Boolean'] // 表示多種可傳入的型別
	}
	
	// 第三種， 針對每個 prop 做更詳細的，物件形式的定義
	props: {
	  variant: {
		type: String,
		required: true // 表示一定要提供
	  },

	  text: {
		type: String,
		default: 'button' // 預設值
	  },

	  other: ['String', 'Array', 'Boolean'], // 表示多種可傳入的型別

	  // 官網提供的 自定義驗證方式，個人目前還沒有用過這樣的模式在專案中
	  propF: {
		validator: function (value) {
		  // 这个值必须匹配下列字符串中的一个
		  return ['success', 'warning', 'danger'].indexOf(value) !== -1
		}
	  }
	}
})

// 若是傳入了不符合類型的資訊，使用開發版 Vue 將會看到警告

通常我都用第三種，就算當下功能很小也一樣，如此要擴充才不用重寫形式，接下來讓我們過濾一下資訊以完成組件

BV 的按鈕，看起來，屬性 variant 以及 Button 文本是完成此組件的必要資訊
<b-button variant="danger">Button</b-button>

所以依照 " 想讓使用者傳入的屬性來定義 Prop " 這個概念製作組件，我們必須定義一個 prop variant ，接著就過濾我們組件如下

Vue.component('m-button', {
    template: `
      <div class="button">
        <button type="button"></button>
      </div>
    `,
    props: {
      variant: {
        type: String,
        default: 'normal'
      }
    }
})

接著我們在 HTML 中使用我們自己的 button

<m-button variant="danger">Button</m-button>

然後看看我們的 button

咦 ? 別急我們還缺很多東西啊，我們首先確定HTML Attribute variant 有沒有正確傳值進子層，要怎麼確定呢 ? 組件有繼承 Vue 的生命週期機制和特性，也就是說在一個 Vue 實例中可以使用的一切，比如生命週期的各種掛勾 ( hooks ) created、mounted 等等、data、computed 、methods 等等，都可以使用在組件內，可以想像成組件就是 Vue 實例的縮小版，當然一個組件也是可以設計得很大的 ...。
另外再完全照抄 Vue 官網的一句話 :

注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

也就是說註冊組件並使用時 Props 會先跑且驗證後才進入創建的生命週期，理解了這樣的機制，所以我們可以在生命週期中檢查 prop。

Vue.component('m-button', {
  template: `
    <div class="mbutton">
        <button type="button"></button>
    </div>
  `,
  props: {
    variant: {
        type: String,
        default: 'normal'
    }
  },
  beforeCreate () {
    console.log('in beforeCreate')
    console.log(this.variant)
  },
  created () {
    console.log('in created')
    console.log(this.variant)
  }
})

輸出

所以發現 Props 的特性和 data 是一樣的，都要等到 created 之後才能夠進行存取，並且目前我們的字串 danger 是有傳進子層的。

<m-button variant="danger">Button</m-button>

接下來，為何 Button文本沒有顯示呢 ? 是否記得 Day 02 中有提到，生命週期若有提供 template，會完全把 template 的內容編譯替換過去，也就是說你原本若是有寫東西，他是會不見的，舉個例子 review 下 ( 只是舉例，通常比較少在外面的 Vue 實例寫 template，因為所有東西都會被 template 覆蓋，如果真的這麼做，那你所有東西都必須塞進 template了 )。

<div id="app">
  aka allen
</div>

... in script tag

let vm = new Vue({
  template: `
    <div class="NewTemplate">
      Elvis
    </div>
  `
})

// 先不要掛載，註解起來
// vm.$mount("#app")

拿掉註解前

拿掉註解，現在我變 Elvis 了啦，今天逛爆廢公社了沒，真是廢爆了。

也就是說 template 就是大局，而接下來要說的 Slot ( 插槽 )，就是讓我們可以在外部插入內容的關鍵利器，你可以把 template 想成主機板，而我們的主機板不是有很多的插槽嗎 ?
有記憶體的

圖片來源: https://ofeyhong.pixnet.net/blog/post/68205660

CPU 的

圖片來源: https://zh.wikipedia.org/zh-mo/Socket_370

搞什麼東西隨便 Google 人家圖片也太廢了吧，會不會被吉阿。想像一下，如果今天整塊主機板都已經封裝焊死，板子上沒有其他插槽留給你，零件也拔不下來的話，那我今天要怎麼更換顯示卡，記憶體這些零件呢 ? 所以我們的 slot 就好像我們幫使用者預留的插槽一樣，讓使用者可以在外部更換自己想使用的零件啦，so :

<div id="app">
  aka allen
</div>

... in script tag

// 加入slot
let vm = new Vue({
  template: `
    <div class="NewTemplate">
	  <slot></slot>
      Elvis 
    </div>
  `
})

vm.$mount("#app")

看看結果 ? 咦 ? 怎麼還是只有 Elvis ? 原來我們的 slot 不能用在最外面的 Vue 實例，只能用在組件裡，如果有人知道怎麼在 Vue 實例 template 使用 slot 的話請留言教學一下，讓我也學習學習。
回到 m-button 加入 slot ，console什麼的可以刪了啦。

<m-button variant="danger">Button</m-button>

// ...

Vue.component('m-button', {
  template: `
    <div class="mbutton">
      <button type="button">
		<slot></slot>
	  </button>
    </div>
  `,
  props: {
	variant: {
	  type: String,
		default: 'normal'
	}
  }
})

Button 出現了

注意我們的插槽位置，事實上他可以放在任何位置，比如說

template: `
  <div class="mbutton">
	<slot></slot>
    <button type="button"></button>
  </div>
`

如此這樣顯示

換到這邊

template: `
  <div class="mbutton">
    <button type="button"></button>
	<slot></slot>
  </div>
`

變這樣

太調皮了ㄅㄏㄏ，針對 slot ，還可以做更進一步的使用，不過目前為止的需求使用到這邊就足夠了，我們先這樣就好，現在先把 slot 安裝回正確的位置，這樣我們主機板上的記憶體才不會插在莫名其妙的版面配置中 ...。
接下來為我們的按鈕準備 style ，經過去 BV 官網偷看，以下是狀態按鈕的色票們:

預設 = #6c757d，danger = #dc3545 ， success = #28a745，primary = #007bff，依照這些色票，開始包裝我們的組件，我們將使用 computed 屬性來替換 class 的方法來達成目標。

1. 刪掉 div.mbutton 那層，以button作為根元素就好
2. class="btn" 與 :class=" 'btn-' + dynamicClass" 是可以共存的，最終兩個會一起渲染，利用這個特性，準備一個共用的.btn
3. 而 dynamicClass 將會被 computed 的 dynamicClass getter 返回一個新值
   隨使用者傳入的不同字串，動態的被改變。
4. v-bind 除了可以綁定 data member， 也可綁定 props member ，相對的 computed 也可以監測 props 變化，可以把 props 當成另一種形式的 data。

Vue.component('m-button', {
  template: `
    <button type="button" class="btn" :class=" 'btn-' + dynamicClass" >
      <slot></slot>
    </button>
  `,
  props: {
    variant: {
      type: String,
      default: 'normal'
    }
  },
  computed: {
    dynamicClass () {
      return this.variant
    }
  }
})

<m-button>Button</m-button>
<m-button variant="success">Button</m-button>
<m-button variant="primary">Button</m-button>
<m-button variant="danger">Button</m-button>

隨著傳入字串的不同，HTML確實被動態的改變了，並且預設沒傳入 variant 也確實地藉由設定 default 來進行預設的渲染。

我們的按鈕目前還長這樣

準備 CSS

// 先準備 .btn 作為按鈕基本型
.btn {
  border-radius: 5px;
  color: white;
  padding: .375rem .75rem;
  border: 1px solid transparent;
  box-shadow: 0 1px 1px 0px black
}

// 定義各色塊
// 預設 = #6c757d ， success = #28a745 ， primary = #007bff ， danger = #dc3545

.btn-normal {
  background-color: #6c757d;
}

.btn-success {
  background-color: #28a745;
}

.btn-primary {
  background-color: #007bff;
}

.btn-danger {
  background-color: #dc3545;
}

最後這樣: