Alex宅幹嘛ReVue-Day09-vue元件

• Components Basics
  這邊是介紹一下，Vue 元件的一些特性。

  Vue 元件

  元件是一個可以被重複利用的 Vue 物件，他們擁有自己的 data, computed, watch, methods 和 lifecycle hooks。

Vue 元件 data 回傳 function

在 Vue 自創的元件中，你會發現data 都是透過 function 來回傳一個物件。
這樣設計的原因是 closure 的概念，因為，這樣的話元件和元件之間的 data 就不會互相干擾囉。
跟最外層的 new Vue 的 data 寫法不太一樣，不要搞混囉。

---JavaScript---
Vue.component('basic-component', {
   data: function () {
   
   }
})

new Vue({
  data: {
  
  }
})

props

可以透過 props 來將外層的資料傳到元件內部，但是，props 有單向資料的特性。也就是我們無法直接透過元件內部來修改由外層傳進來的資料。

is 功能嚴格限制

我們可以透過 is 來動態綁定元件內容，但是，遇到像 ul, ol, table 這一類有嚴格限制的 HTML 標籤時(像 table 裡面要放 tr td)就要特別注意囉。

Vue 元件 使用 v-model 搭配 props:[‘value’]

在官方文件中有說到，當你在 component 的外部使用 v-model 並想要將 v-model 的值傳入 component 裡面的話，相對應的 props 成員要取名為 value 喔。
那這種方式在課堂是運用將外部傳送資料到內部的時候做使用，你內部元件改資料歸改資料，最終傳遞出來的東西要不要使用還是取決於外部。
另外，還有使用另一種內傳外的寫法，而這種寫法就是直接由元件管理並擁有 input 的元素，改動完之後，再將資料傳給外面。

不要用元件直接修改外部的資料

在本課堂中，把 li 做成 Vue 元件，並透過它的 props 屬性的 item 將原本陣列資列的各個元素直接接到元件內部。那這樣的傳遞方式，其實是傳址的方式將原本的資料傳進元件中。
在元件內部的 checkbox 部分，可能會直接更動到外部元素的 status 屬性值。那這邊就運用 computed 來達成不透過元件內部來修改外部的內容。

你可以看到上面這個範例我們的 list-component 元件有一個 item 的 props，把外部的 TotalTodoList 的元素物件直接傳入元件裡面。
接著，在 template 裡面的 input 欄位的 value 屬性直接綁定該元件的 computed 的 status 物件，接著，對他設定 set 和 get 的內容。
那 get 就直接回傳此元件傳入的 item 內容，那 set 的內容就是直接發一個該元件自訂義的 chang-status 事件，並將該 props 的 item 和要更改的 value 內容往外傳。
接著，你可以看到 list-component 元件的 chang-status 會觸發外層的 changeHandler 事件。然後，在 changeHandler 事件來將 item.status 的內容設為 value 。
如此，我們就實現了不讓元件內部直接修改傳入資料的內容的概念囉。

Alex 宅幹嘛-眉眉角角

元件 template 建議用反引號寫

在 Vue-component 的 template 部分， Alex 大大是建議用 把 template 內容包起來，這樣就比較不用在意內容有單引號和單引號的問題囉。 但是，前提是你的瀏覽器版本有支援到 ES6 的版本才能用 的語法，不然，還是只能乖乖用單引號或雙引號。

Vue 元件-駝峰寫法的雷

在我們沒有用 Vue Cli 來部屬我們專案環境的時候，單純直接用 Vue cdn 的方式，來引入 Vue 套件的話，要特別注意 Vue-component 的命名。
如果，component 的命名是用駝峰式的方式在命名的話，你在 HTML 檔案中，使用該元件的時候，在駝峰大寫的部分要改為用 - 來連接，會造成這樣的原因是 HTML 本身是不支援大小寫的，他會一律是為小寫。
即:
ex:

---HTML---
<filter-component />    // 你在 HTML 文本中要改成這樣子引用你剛剛定義的 filterComponent 元件，不然瀏覽器會報錯


---JavaScript---
Vue.component('filterComponent', function (){
  data: function() {
    return {
	
	}
  },
  template: `<p>123</p>`
})

或者你可以將 component 的命名改成
ex:

---HTML---
<filter-component />   


---JavaScript---
Vue.component('filter-component', function (){   // 直接改成這樣就沒事了，可以直接在 html 中引用
  data: function() {
    return {
	
	}
  },
  template: `<p>123</p>`
})

Vue 元件-字峰寫法的雷

還是要特別聲明一下，這種情況會發生在沒有用 Vue Cli 來部屬我們專案環境的時候，單純直接用 Vue cdn 的方式，來引入 Vue 套件的話會發生。
如果我們在 html 文件中用字峰的方式引入元件的話，可能會導致該元件後面的 HTML 內容不會被呈現在畫面。
即:

<filter-component />

<ul>
  <li>123</li>
  <li>123</li>
</ul>

filter-component 它有可能讓後面的 ul 不呈現出來。
這時候就要改回原本的寫法就能解決以上的情形了。

<filter-component></filter-component>

<ul>
  <li>123</li>
  <li>123</li>
</ul>

這樣改完就 ok 了。