## 組件基礎 ### 什么是組件？ 組件是可復用的 Vue 實例，且帶有一個名字。 ### 基本示例 ~~~ // 定義一個名為 button-counter 的新組件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) ~~~ ~~~ <div id="components-demo"> <button-counter></button-counter> </div> new Vue({ el: '#components-demo' }) ~~~ ### 全局注冊和局部注冊 ~~~ Vue.component('name', {...}) ~~~ ~~~ var ComponentA = { /* ... */ } var ComponentB = { /* ... */ } var ComponentC = { /* ... */ } new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB } }) ~~~ ### 命名方式 ~~~ //kebab-case (短橫線分隔命名) Vue.component('my-component-name', { /* ... */ }) //PascalCase (駝峰式命名) Vue.component('MyComponentName', { /* ... */ }) ~~~ ### 組件的復用 ~~~ <div id="components-demo"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div> ~~~ ### data 必須是一個函數 ~~~ data: { count: 0 } ~~~ 取而代之的是，一個組件的 data 選項必須是一個函數，因此每個實例可以維護一份被返回對象的獨立的拷貝： ~~~ data: function () { return { count: 0 } } ~~~ ### 通過 Prop 向子組件傳遞數據 ~~~ Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>' }) ~~~ ~~~ new Vue({ el: '#blog-post-demo', data: { posts: [ { id: 1, title: 'My journey with Vue' }, { id: 2, title: 'Blogging with Vue' }, { id: 3, title: 'Why Vue is so fun' } ] } }) ~~~ ~~~ <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title" ></blog-post> ~~~ ### 單個根元素 每個組件必須只有一個根元素 否則會報錯 every component must have a single root element (每個組件必須只有一個根元素) ~~~ <h3>{{ title }}</h3> <div v-html="content"></div> ~~~ ~~~ <div class="blog-post"> <h3>{{ title }}</h3> <div v-html="content"></div> </div> ~~~ ### 通過事件向父級組件發送消息 組件外 ~~~ <blog-post v-on:enlarge-text="onEnlargeText"></blog-post> methods: { onEnlargeText: function (enlargeAmount) { this.postFontSize += enlargeAmount } } ~~~ 組件內部 ~~~ <button v-on:click="$emit('enlarge-text', 0.1)"> Enlarge text </button> ~~~ ### 在組件上使用 v-model ~~~ <input v-model="searchText"> ~~~ ~~~ <input v-bind:value="searchText" v-on:input="searchText = $event.target.value" > ~~~ ~~~ <custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input> ~~~ 為了讓它正常工作，這個組件內的 input 必須： 將其 value 特性綁定到一個名叫 value 的 prop 上 在其 input 事件被觸發時，將新的值通過自定義的 input 事件拋出 ~~~ Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > ` }) ~~~ ### 通過插槽分發內容 ~~~ <alert-box> Something bad happened. </alert-box> ~~~ ~~~ Vue.component('alert-box', { template: ` <div class="demo-alert-box"> <strong>Error!</strong> <slot></slot> </div> ` }) ~~~ ### 動態組件 ~~~ <!-- 組件會在 `currentTabComponent` 改變時改變 --> <component v-bind:is="currentTabComponent"></component> ~~~ ### 課后習題 1.設計一個組件，實現一個通過傳入的秒數進行倒計時的效果，并通過插槽的方式，為定時器顯示的數字后面帶上一段描述的話！ ~~~ <cutdown timer="14">秒后開始搶購</cutdown> // 效果 <div>14秒后開始搶購<div> <div>13秒后開始搶購<div> . . . ~~~