組件 component

在第四日撿到財神爺帽子鬍鬚組時有提到：
component記得要 data/ function/ return 才不會變均富卡，現在要談談將component發揮更大的功效。
官網组件的组织
我們在寫一個網站時，有頁首、頁尾、左側欄、右側欄、內文等等區塊，有些區塊重複性非常高，例如：
內文區塊除了資料內容不同，語法跟排版樣式都一樣；成員簡介除了圖片檔跟簡介內文不同，其他皆同。
如果我們都要全部塞在 html裡面，整份 html就會變得很冗長，也不好維護，遇到重複性高的情況，我們就可以考慮使用component

x-template

官網X-Templates
與日前介紹過的component寫法不同於：在template時是寫一個idName，然後再寫<scrpit>

Vue.component('money-counter', { //tag name
  template: '#money-counter-template'
})

<script type="text/x-template" id="money-counter-template">
  //html標籤 + {{ 要渲染的資料 }}
</script>

官網提醒：

这些可以用于模板特别大的 demo 或极小型的应用，但是其它情况下请避免使用，因为这会将模板和该组件的其它定义分离开。

這應該是在說組件內資料跟外部分離，資料要用props寫入，再用 :propsName來引導指向資料位置，例如：

Vue.component('money-counter', {
  props: ['cash'],
  template: '#money-counter-template'
})

is

is是動態切換組件使用的，不過筆者也不知怎麼舉實例更淺白來解釋它，就上官網囉～
动态组件
is

(12/11)
可用來避開違反 HTML結構，例如在<tbody>底下放<templateName>而不是放<td> 或 <tr>造成跑版

<tbody>
  <tr is="money-counter">
</tbody>

局部註冊

局部注册

全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

component寫成局部的話我們把原本

Vue.component( ..., { ...元件內容... })

改為

var sample = { ...元件內容... }

並在new Vue裡面新宣告一個property

components:{ 
	'sampleComponent': sample 
}

改為局部後，其他的app如果沒有宣告就無法使用

小結

最近想標題的時間變比較久，也覺得內容越來越難消化跟表達了
快15天頭過身就過了！gogogo！