Vue 學習筆記 - 基礎（下） 組件基礎

基本示例

定義一個名爲 button-counter 的新組件

Vue.component('button-counter', {
  data: function () {
    return {count: 0}
  },
  template: '<button v-on:click="count++">大爺你點了我 {{ count }} 次.</button>'
})

使用 button-counter 組件

<div id="app">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

<script>
	new Vue({ el: '#app' })
</script>

1. 組件與普通標籤語法一致
2. 組件的參數與new Vue 接收相同的選項。各別el這種根實例特有的選項除外。

組件的複用

1. 組件目的就是複用（每個組件都是一個單獨的實例）
2. 組件的data參數是一個函數（猜是爲了函數作用域吧，這樣各實例才能維護自己獨立的一份數據）

組件的組織

註冊方式	說明
全局註冊	用Vue.component靜態方法，註冊執行後再實例化的所有實例都有此組件.
局部註冊	new Vue({ components : {...}})實例化時components參數註冊，只在本實例內生效。

通過 Prop 向子組件傳遞數據

定義組件中，接受了title參數

Vue.component('book', {
  props: ['title'],
  template: '<p>我喜歡看《{{ title }}》</p>'
})

title作爲一個自定義屬性使用

<book title="《三國》"></book>
<book title="《水滸》"></book>
<book title="《西遊》"></book>

結果：

<p>我喜歡看《三國》</p>
<p>我喜歡看《水滸》</p>
<p>我喜歡看《西遊》</p>

如果我們有一書單，遍歷一下：

new Vue({
  el: '#app',
  data: {
    bookList: [{ id: 1, title: '三國演繹'},{ id: 2, title: '水滸傳'},{ id: 3, title: '西遊記'}]
  }
})

<book v-for="book in bookList" :key="book.id" :title="book.title"></book>

單個根元素

組件必須要有一個根元素，所有的內容都包在根根元素下面。

<div>
	<p>我的書單</p>
	<p>書名：{{title }}</p>
</div>

監聽子組件事件

vm.$emit( eventName, […args] )
Vue內鍵方法，觸發當前實例上的事件。附加參數都會傳給監聽器回調。詳細說明見文檔

在組件上使用 v-model

引子：以下兩段等價

<input v-model="searchText">

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

在組件上用v-model，Vue內部相當於這樣處理：

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

所以我們自定義組件內的input要：

1. 將自己的value屬性綁到自定義組件的value這個prop上
2. 在自己的input事件被觸發時，拋個自定義的 input 事件，把新的值傳出去

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

建議先學完基礎篇再看自定義事件

通過插槽分發內容

組件標籤中的內容，會替換<slot></slot>

<div id="app">
	<book>666</book>
	<book>999</book>
</div>
<script>
	Vue.component('book', {
	  template: "<div>這段紅色部分<span style='color:#f00'><slot></slot></span>是使用組件時填寫的標籤內容</div>"
	})
	new Vue({el: '#app'})
</script>

建議先學完基礎篇再看插槽詳情

動態組件

<component>元素通過is屬性來實現動態顯示指定組件

通過已註冊的組件名字

<div id="app">
	<button v-for="n in ['a','b','c']" v-on:click="currentTab = 't-'+n">標籤{{n}}</button>
	<component v-bind:is="currentTab"></component>
</div>

<script>
  new Vue({
	el: "#app",
	data: {
	  currentTab: "t-a"
	},
	components:{
		"t-a":{ template : "<div>這是a標籤頁。aaaaaaaaaaaaaaaa</div>"},
		"t-b":{ template : "<div>這是b標籤頁。bbbbbbbbbbbbbbbb</div>"},
		"t-c":{ template : "<div>這是c標籤頁。cccccccccccccccc</div>"}
	}
  });
</script>

通過組件選項對象

<div id="app">
	<button v-for="tab in tabs" v-on:click="currentTab = tab">{{tab.name}}</button>
	<component v-bind:is="currentTab.component"></component>
</div>

<script>
	var tabs =[
		{name: "標籤a", component:{template : "<div>這是a標籤頁。aaaaaaaaaaaaaaaa</div>"}},
		{name: "標籤b", component:{template : "<div>這是b標籤頁。bbbbbbbbbbbbbbbb</div>"}},
		{name: "標籤c", component:{template : "<div>這是c標籤頁。cccccccccccccccc</div>"}}
	];
	new Vue({
		el: "#app",
		data: {currentTab: tabs[0], tabs: tabs}
	});
</script>

到目前爲止，關於動態組件你需要了解的大概就這些了，如果你閱讀完本頁內容並掌握了它的內容，我們會推薦你再回來把動態和異步組件讀完。

解析 DOM 模板時的注意事項

<ul>、<ol>、<table>和<select>內部限制只能放特定元素。自定組件可以通過 is指定自定義組件book

<table>
  <tr is="book"></tr>
</table>

需要注意的是如果我們從以下來源使用模板的話，是不存在限制：

• 字符串 (例如：template: '...')
• 單文件組件 (.vue)
• <script type="text/x-template">

參考資料

Vue 官方教程基數篇 - 本筆記的學習對象
Vue 官方CLI 官方文檔
Vue 官方API 參考
Vue 官方API文檔 - 生命週期鉤子

vue-devtools 編譯安裝
我的 Vue CLI 學習筆記
Vue 學習筆記 - 基礎（上）
Vue 學習筆記 - 基礎（中）
Vue 學習筆記 - 基礎（下）組件基礎
Vue 學習筆記 - 深入瞭解組件

MDN 完整有效按鍵名 Key Values
千鋒教育-李衛民 Vue 漸進式 JavaScript 框架