組件
組件可以擴展HTML元素，封裝可重用的代碼，在較高的層面上，組件是自定義元素，vue.js的編譯器為它添加特殊功能，在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴展。
Vue.js的組件可以理解為預先定義好了行為的ViewModel類。一個組件可以預定義很多選項，但最核心的是以下幾個：
模板（template）：模板聲明了數據和最終展現給用戶的DOM之間的映射關系。
初始數據（data）：一個組件的初始數據狀態。對於可復用的組件來說，這通常是私有的狀態。
接受的外部參數(props)：組件之間通過參數來進行數據的傳遞和共享。參數默認是單向綁定（由上至下），但也可以顯式地聲明為雙向綁定。
方法（methods）：對數據的改動操作一般都在組件的方法內進行。可以通過v-on指令將用戶輸入事件和組件方法進行綁定。
生命周期鉤子函數（lifecycle hooks）：一個組件會觸發多個生命周期鉤子函數，比如created，attached，destroyed等等。在這些鉤子函數中，我們可以封裝一些自定義的邏輯。和傳統的MVC相比，可以理解為 Controller的邏輯被分散到了這些鉤子函數中。
私有資源（assets）：Vue.js當中將用戶自定義的指令、過濾器、組件等統稱為資源。由於全局注冊資源容易導致命名沖突，一個組件可以聲明自己的私有資源。私有資源只有該組件和它的子組件可以調用。
除此之外，同一顆組件樹之內的組件之間還可以通過內建的事件API來進行通信。Vue.js提供了完善的定義、復用和嵌套組件的API，讓開發者可以像搭積木一樣用組件拼出整個應用的界面。
組件大大提高了代碼的效率和維護性以及復用率。
使用組件
注冊
1.創建一個組件構造器：
var MyComponent = Vue.extend({
//選項
})
2.將構造器用做組件，用Vue.component(tag,constructor)注冊：
Vue.component('my-component',MyComponent)
3.在父實例的模塊中以自定義元素<my-component>的形式使用：
<div id = "example"> <my-component></my-component> </div>
例子：
<div id="example">
<my-component></my-component>
</div>
// 定義
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})
// 注冊
Vue.component('my-component', MyComponent)
// 創建根實例
new Vue({
el: '#example'
})
渲染為：
<div id = "example"> <div>A custom component!</div> </div>
組件的模板替換了自定義元素，自定義元素的作用只是作為一個掛載點。可以用實例選項 replace 決定是否替換。
局部注冊
用實例選項components注冊，不需要全局注冊每個組件，可以讓組件只能用在其他組件內：
var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
template: '...',
components: {
// <my-component> 只能用在父組件模板內
'my-component': Child
}
})
這種封裝也適用於其它資源，如指令、過濾器和過渡。
注冊語法糖
// 在一個步驟中擴展與注冊
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 局部注冊也可以這麼做
var Parent = Vue.extend({
components: {
'my-component': {
template: '<div>A custom component!</div>'
}
}
})
組件選項問題
傳入Vue構造器的多數選項也可以用在Vue.extend()中，除了data和el，如果簡單的把一個對象作為data選項傳給Vue.extend()，則所有的實例將共享同一個data對象，因此我們應當使用一個函數作為data選項，讓這個函數返回一個新對象：
var MyComponent = Vue.extend({
data: function () {
return { a: 1 }
}
})
模板解析
Vue的模板是DOM模板，使用浏覽器原生的解析器，所以它必須是有效的HTML片段，一些HTML元素對什麼元素可以放在它裡面有限制，常見的限制有：
a 不能包含其它的交互元素（如按鈕，鏈接）
ul 和 ol 只能直接包含 li
select 只能包含 option 和 optgroup
table 只能直接包含 thead, tbody, tfoot, tr, caption, col, colgroup
tr 只能直接包含 th 和 td
在實際中，這些限制會導致意外的結果。盡管在簡單的情況下它可能可以工作，但是你不能依賴自定義組件在浏覽器驗證之前的展開結果。例如
<my-select><option>...</option></my-select> 不是有效的模板，即使 my-select 組件最終展開為 <select>...</select>。
另一個結果是，自定義標簽（包括自定義元素和特殊標簽，如 <component>、<template>、 <partial> ）不能用在 ul, select, table 等對內部元素有限制的標簽內。放在這些元素內部的自定義標簽將被提到元素的外面，因而渲染不正確。
對於自定義元素，應當使用 is 特性：
<table>
<tr is="my-component"></tr> </table> //<template> 不能用在 <table> 內，這時應使用 <tbody>，<table> 可以有多個 <tbody> <table> <tbody v-for="item in items"> <tr>Even row</tr> <tr>Odd row</tr> </tbody> </table>
Props
使用props傳遞數據
組件實例的作用域是孤立的，可以使用props把數組傳給子組件，props是組件數據的一個字段，期望從父組件傳下來，子組件需要顯式地用props選項聲明props：
Vue.component('child', {
// 聲明 props
props: ['msg'],
// prop 可以用在模板內
// 可以用 `this.msg` 設置
template: '<span>{{ msg }}</span>'
})
然後向它傳入一個普通字符串：
<child msg="hello!"></child>
動態props
用v-bind綁定動態props到父組件的數據，每當父組件的數據變化時，也會傳導給子組件：
<div> <input v-model="parentMsg"> <child v-bind:my-message="parentMsg"></child> //<child :my-message="parentMsg"></child> </div>
props綁定類型
prop默認是單向綁定，當父組件的屬性變化時，將傳導給子組件，但是反過來不會，這是為了防止子組件無意修改了父組件的狀態，可以使用.sync或.once綁定修飾符顯式地強制雙向或單次綁定：
<!-- 默認為單向綁定 --> <child :msg="parentMsg"></child> <!-- 雙向綁定 --> <child :msg.sync="parentMsg"></child> <!-- 單次綁定 --> <child :msg.once="parentMsg"></child>
如果 prop 是一個對象或數組，是按引用傳遞。在子組件內修改它會影響父組件的狀態，不管是使用哪種綁定類型。
父子組件通信
父鏈
子組件可以用this.$parent訪問它的父組件，根實例的後代可以用this.$root訪問它，父組件有一個數組this.$children，包含它所有的子元素
自定義事件
Vue實例實現了一個自定義事件接口，用於在組件樹中通信，這個事件系統獨立於原生DOM事件，用法也不同，每一個Vue實例都是一個事件觸發器：
使用 $on() 監聽事件；
使用 $emit() 在它上面觸發事件；
使用 $dispatch() 派發事件，事件沿著父鏈冒泡；
使用 $broadcast() 廣播事件，事件向下傳導給所有的後代。
不同於 DOM 事件，Vue 事件在冒泡過程中第一次觸發回調之後自動停止冒泡，除非回調明確返回 true。
<!-- 子組件模板 -->
<template id="child-template">
<input v-model="msg">
<button v-on:click="notify">Dispatch Event</button>
</template>
<!-- 父組件模板 -->
<div id="events-example">
<p>Messages: {{ messages | json }}</p>
<child></child>
</div>
// 注冊子組件
// 將當前消息派發出去
Vue.component('child', {
template: '#child-template',
data: function () {
return { msg: 'hello' }
},
methods: {
notify: function () {
if (this.msg.trim()) {
this.$dispatch('child-msg', this.msg)
this.msg = ''
}
}
}
})
// 初始化父組件
// 將收到消息時將事件推入一個數組
var parent = new Vue({
el: '#events-example',
data: {
messages: []
},
// 在創建實例時 `events` 選項簡單地調用 `$on`
events: {
'child-msg': function (msg) {
// 事件回調內的 `this` 自動綁定到注冊它的實例上
this.messages.push(msg)
}
}
})
效果：
使用v-on綁定自定義事件
在模板中子組件用到的地方聲明事件處理器，為此子組件可以用v-on監聽自定義事件：
<child v-on:child-msg="handleIt"></child>
當子組件觸發了 "child-msg" 事件，父組件的 handleIt 方法將被調用。所有影響父組件狀態的代碼放到父組件的 handleIt 方法中；子組件只關注觸發事件。
子組件索引
使用v-ref為子組件指定一個索引ID，可以直接訪問子組件
<div id="parent">
<user-profile v-ref:profile></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 訪問子組件
var child = parent.$refs.profile
使用Slot分發內容
內容分發：混合父組件的內容與子組件自己的模板的方式，使用特殊的<slot>元素作為原始內容的插槽。
編譯作用域
父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯。
綁定子組件內的指令到一個組件的根節點：
Vue.component('child-component', {
// 有效，因為是在正確的作用域內
template: '<div v-show="someChildProperty">Child</div>',
data: function () {
return {
someChildProperty: true
}
}
})
類似地，分發內容是在父組件作用域內編譯。
單個slot
父組件的內容將被拋棄，除非子組件模板包含<slot>，如果子組件模板只有一個沒有特性的slot，父組件的整個內容將插到slot所在的地方並替換它。
<slot> 標簽的內容視為回退內容。回退內容在子組件的作用域內編譯，當宿主元素為空並且沒有內容供插入時顯示這個回退內容。
假定 my-component 組件有下面模板：
<div> <h1>This is my component!</h1> <slot>
如果沒有分發內容則顯示我。
</slot> </div>
父組件模板：
<my-component> <p>This is some original content</p> <p>This is some more original content</p> </my-component>
渲染結果：
<div> <h1>This is my component!</h1> <p>This is some original content</p> <p>This is some more original content</p> </div>
具名slot
<slot>元素可以用一個特殊特性name配置如何分發內容，多個slot可以有不同的名字，具名slot將匹配內容片段中有對應slot特性的元素。
仍然可以有一個匿名 slot，它是默認 slot，作為找不到匹配的內容片段的回退插槽。如果沒有默認的 slot，這些找不到匹配的內容片段將被拋棄。
動態組件
多個組件可以使用同一個掛載點，然後動態地在它們之間切換，使用保留的<component>元素，動態地綁定到它的is特性：
new Vue({
el: 'body',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
<component :is="currentView">
<!-- 組件在 vm.currentview 變化時改變 -->
</component>
keep-alive
把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染。
<component :is="currentView" keep-alive>
<!-- 非活動組件將被緩存 -->
</component>
activate鉤子
控制組件切換時長，activate 鉤子只作用於動態組件切換或靜態組件初始化渲染的過程中，不作用於使用實例方法手工插入的過程中。
Vue.component('activate-example', {
activate: function (done) {
var self = this
loadDataAsync(function (data) {
self.someData = data
done()
})
}
})
transition-mode
transition-mode 特性用於指定兩個動態組件之間如何過渡。
在默認情況下，進入與離開平滑地過渡。這個特性可以指定另外兩種模式：
in-out：新組件先過渡進入，等它的過渡完成之後當前組件過渡出去。
out-in：當前組件先過渡出去，等它的過渡完成之後新組件過渡進入。
示例：
<!-- 先淡出再淡入 -->
<component
:is="view"
transition="fade"
transition-mode="out-in">
</component>
.fade-transition {
transition: opacity .3s ease;
}
.fade-enter, .fade-leave {
opacity: 0;
}
Vue.js 組件 API 來自三部分——prop，事件和 slot：
prop 允許外部環境傳遞數據給組件；
事件 允許組件觸發外部環境的 action；
slot 允許外部環境插入內容到組件的視圖結構內。
以上所述是小編給大家介紹的Vue.js組件使用開發實例教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！