ReVue-Vue的emit和props運用

Components Basics
在我的部落格中 介紹emit文章 和 介紹props文章 都是介紹基礎的 emit 和 props 的運用。
那在這個單元是 Alex 課程介紹 Vue 的元件的使用概念。尤其像是要不要由元件來更改外部資料的概念。

Vue 物件

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

Vue 元件 data 回傳 function

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

props

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

is 功能嚴格限制

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

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

在官方文件中有說到，當你在 component 的外部使用 v-model 並想要將 v-model 的值傳入 component 裡面的話，你的相對應的 prop 要取名為 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>

---JavaScript---
Vue.component('filterComponent', {
  data: function () {
    return {

    }
  }
})

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

---HTML---
<filter-component></filter-component>    // 改掉原本的字峰寫法

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

---JavaScript---
Vue.component('filterComponent', {
  data: function () {
    return {

    }
  }
})

這樣改完就 ok 了。