前面的話
組件（component）是Vue最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼，根據項目需求，抽象出一些組件，每個組件里包含了展現、功能和樣式。每個頁面，根據自己的需要，使用不同的組件來拼接頁面。這種開發模式使得前端頁面易於擴展，且靈活性高，而且組件之間也實現了解耦。本文將詳細介紹Vue組件基礎用法。
概述
在Vue里，一個組件本質上是一個擁有預定義選項的一個Vue實例。組件是一個自定義元素或稱為一個模塊，包括所需的模板、邏輯和樣式。在HTML模板中，組件以一個自定義標簽的形式存在，起到占位符的功能。通過Vue.js的聲明式渲染后，占位符將會被替換為實際的內容。
注冊組件
組件注冊包括全局注冊和局部注冊兩種
【全局注冊】
要注冊一個全局組件，可以使用Vue.component(tagName,option)
Vue.component("my-component",{
//選項
})
組件在注冊之后，便可以在父實例的模塊中以自定義元素<my-component></my-component>的形式使用
[注意]要確保在初始化根實例之前注冊了組件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component("my-component",{
template:"<div>組件化開發</div>"
})
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>
【局部注冊】
通過使用組件實例選項component注冊，可以使組件僅在另一個實例或者組件的作用域中可用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
//注冊
var child = {
template:"<div>局部組件化開發</div>"
};
var vm = new Vue({
el: "#app",
components:{
//<my-component> 將只在父模板可用
"my-component":child
}
})
</script>
</body>
</html>
組件樹
使用組件實例選項components注冊，可以實現組件樹的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
//注冊
var headerTitle = {
template:"<h1>標題</h1>"
};
var headerContent = {
template:"<p>段落</p>"
};
var header = {
template:`
<div class="hd">
<header-content></header-content>
<header-title></header-title>
</div>
`,
components:{
"header-content":headerContent,
"header-title":headerTitle
}
};
//創建實例
var vm = new Vue({
el: "#app",
components:{
"my-component":header
}
})
</script>
</body>
</html>
對於大型應用來說，有必要將整個應用程序划分為組件，以便開發可管理。一般的組件應用模板如下所示：
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
【v-once】
盡管在Vue中渲染HTML很快，不過當組件中包含大量靜態內容時，可以考慮使用v-once將渲染結果緩存起來。
Vue.component('my-component', {
template: '<div v-once>hello world!...</div>'
})
模板分離
在組件注冊中，使用template選項中拼接HTML元素比較麻煩，這也導致了HTML和JavaScript的高耦合性。慶幸的是，Vue.js提供了兩種方式將定義在JavaScript中的HTML模板分離出來。
【script】
<script type="text/x-template" id="hello-world-template"> <p>Hello hello hello</p> </script> Vue.component('hello-world', { template: '#hello-world-template' })
上面的代碼等價於
Vue.component('hello-world',{
template:'<p>Hello hello hello</p>'
})
下面是一個簡單的示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script type="text/x-template" id="hello-world-template">
<div>hello world</div>
</script>
<script>
//注冊
Vue.component("my-component",{
template:"#hello-world-template"
});
//創建實例
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>
【template】
如果使用template標簽，則不需要指定type屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<template id="hello-world-template">
<div>hello world</div>
</template>
<script>
//注冊
Vue.component("my-component",{
template:"#hello-world-template"
});
//創建實例
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>
命名約定
對於組件的命名，W3C規范是字母小寫且包含一個中划線（-），雖然Vue沒有強制要求，但是最好遵循規范
<!-- 在HTML模版中始終使用 kebab-case --> <kebab-cased-component></kebab-cased-component> <camel-cased-component></camel-cased-component> <pascal-cased-component></pascal-cased-component>
當注冊組件時，使用中划線、小駝峰和大駝峰這三種任意一種都可以
// 在組件定義中 components: { // 使用 中划線 形式注冊 'kebab-cased-component': { /* ... */ }, // 使用 小駝峰 形式注冊 'camelCasedComponent': { /* ... */ }, // 使用 大駝峰 形式注冊 'PascalCasedComponent': { /* ... */ } }
嵌套限制
並不是所有的元素都可以嵌套模板，因為要受到HTML元素嵌套規則的限制，尤其像<ul>、<ol>、<table>和<select>等限制了能被它包裹的元素，而一些像<option>這樣的元素只能出現在某些其他元素內部。在自定義組件中使用這些受限制的元素時會導致一些問題，例如：
<table id="app"> <my-row>...</my-row> </table>
自定義組件<my-row>被認為是無效的內容，因此在渲染的時候會導致錯誤
<script> //注冊 var header = { template:'<div class="hd">我是標題</div>' }; //創建實例 new Vue({ el:'#app', components:{ 'my-row' :header } }) </script>
【is屬性】
變通的方案是使用特殊的is屬性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <table id="app"> <tr is="my-row"></tr> </table> <script> //注冊 var header = { template:"<div class='hd'>我是標題</div>" } //創建實例 var vm = new Vue({ el: "#app", components:{ "my-row":header } }) </script> </body> </html>
根元素
Vue強制要求每一個Vue實例（組件的本質上就是一個Vue實例）需要有一個根元素，如下所示，則會出現異常（只出現“第一段”。小火柴這里有點錯誤，估計是vue版本更新導致）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <my-component></my-component> </div> <script> // 注冊 Vue.component('my-component', { template: ` <p>第一段</p> <p>第二段</p> `, }) // 創建根實例 new Vue({ el: '#app' }) </script> </body> </html>
需要改寫成如下所示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <my-component></my-component> </div> <script> // 注冊 Vue.component('my-component', { template: ` <div> <p>第一段</p> <p>第二段</p> </div> `, }) // 創建根實例 new Vue({ el: '#app' }) </script> </body> </html>
data數據
一般的，我們在Vue實例對象或Vue組件對象中，我們通過data來傳遞數據
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <my-component></my-component> <my-component></my-component> <my-component></my-component> </div> <script> // 注冊 Vue.component('my-component', { template: '<div>{{message}}</div>', data:{ message:'hello' } }) // 創建根實例 new Vue({ el: '#app' }) </script> </body> </html>
執行上面的代碼，會使Vue停止運行，並在控制台發出錯誤提示
可以使用下面方式來繞開Vue的錯誤提示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <my-component></my-component> <my-component></my-component> <my-component></my-component> </div> <script> // 注冊 Vue.component('my-component', { template: '<div>{{message}}</div>', data:function(){ return {message:'hello'} } }) // 創建根實例 new Vue({ el: '#app' }) </script> </body> </html>
【data數據共享問題】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <my-component></my-component> <my-component></my-component> <my-component></my-component> </div> <script> // 注冊 var data = {counter:0} Vue.component('my-component', { template: '<button v-on:click="counter +=1">{{counter}}</button>', data:function(){ return data } }) // 創建根實例 new Vue({ el: '#app' }) </script> </body> </html>
由於這三個組件共享了同一個data，因此增加一個counter會影響所有組件。當一個組件被定義，data需要聲明為返回一個初始數據對象的函數，因為組件可能被用來創建多個實例。如果data仍然是一個純粹的對象，則所有的實例將共享引用同一個數據對象，通過提供data函數，每次創建一個新實例后，能夠調用data函數，從而返回初始數據的一個全新副本數據對象。因此，可以通過為每個組件返回全新的data對象來解決這個問題
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <my-component></my-component> <my-component></my-component> <my-component></my-component> </div> <script> // 注冊 Vue.component('my-component', { template: '<button v-on:click="counter +=1">{{counter}}</button>', data:function(){ return {counter:0}; } }) // 創建根實例 new Vue({ el: '#app' }) </script> </body> </html>
原生事件
有時候，可能想在某個組件的根元素上監聽一個原生事件。直接使用v-bind指令是不生效的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <my-component @click="doSomething"></my-component> <p>{{message}}</p> </div> <script> // 注冊 Vue.component('my-component', { template: '<button>按鈕</button>', }) // 創建根實例 new Vue({ el: '#app', data:{ message:0 }, methods:{ doSomething(){ this.message++ } } }) </script> </body> </html>
要實現這個效果，使用.native 修飾v-on指令即可
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <my-component @click.native="doSomething"></my-component> <p>{{message}}</p> </div> <script> // 注冊 Vue.component('my-component', { template: '<button>按鈕</button>', }) // 創建根實例 new Vue({ el: '#app', data:{ message:0 }, methods:{ doSomething(){ this.message++ } } }) </script> </body> </html>