這兩天學習了Vue.js 感覺組件這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記。
首先Vue組件的使用有3個步驟，創建組件構造器，注冊組件，使用組件3個方面。
代碼演示如下：
<!DOCTYPE html>
<html> <body> <div id="app"> <!-- 3. #app是Vue實例掛載的元素，應該在掛載元素范圍內使用組件--> <my-component></my-component> </div> </body> <script src="js/vue.js"></script> <script> // 1.創建一個組件構造器 var myComponent = Vue.extend({ template: '<div>This is my first component!</div>' }) // 2.注冊組件，並指定組件的標簽，組件的HTML標簽為<my-component> Vue.component('my-component', myComponent) new Vue({ el: '#app' }); </script> </html>
2.理解組件的創建和注冊
我們用以下幾個步驟來理解組件的創建和注冊：
1.
2.
3. 使用
4.
5. 組件應該掛載到某個Vue實例下，否則它不會生效。
Vue.extend()是Vue構造器的擴展，調用
Vue.extend()創建的是一個組件構造器，而不是一個具體的組件實例。
2.
Vue.extend()構造器有一個選項對象，選項對象的
template屬性用於定義組件要渲染的HTML。
3. 使用
Vue.component()注冊組件時，需要提供2個參數，第1個參數時組件的標簽，第2個參數是組件構造器。
4.
Vue.component()方法內部會調用組件構造器，創建一個組件實例。
5. 組件應該掛載到某個Vue實例下，否則它不會生效。
請注意第5點，以下代碼在3個地方使用了<my-component>標簽，但只有#app1和#app2下的<my-component>標簽才起到作用。
<!DOCTYPE html>
<html> <body> <div id="app1"> <my-component></my-component> </div> <div id="app2"> <my-component></my-component> </div> <!--該組件不會被渲染--> <my-component></my-component> </body> <script src="js/vue.js"></script> <script> var myComponent = Vue.extend({ template: '<div>This is a component!</div>' }) Vue.component('my-component', myComponent) var app1 = new Vue({ el: '#app1' }); var app2 = new Vue({ el: '#app2' }) </script> </html>
全局注冊和局部注冊
調用Vue.component()注冊組件時，組件的注冊是全局的，這意味着該組件可以在任意Vue示例下使用。
如果不需要全局注冊，或者是讓組件使用在其它組件內，可以用選項對象的components屬性實現局部注冊。
上面的示例可以改為局部注冊的方式：
<!DOCTYPE html>
<html> <body> <div id="app"> <!-- 3. my-component只能在#app下使用--> <my-component></my-component> </div> </body> <script src="js/vue.js"></script> <script> // 1.創建一個組件構造器 var myComponent = Vue.extend({ template: '<div>This is my first component!</div>' }) new Vue({ el: '#app', components: { // 2. 將myComponent組件注冊到Vue實例下 'my-component' : myComponent } }); </script> </html>
由於my-component組件是注冊在#app元素對應的Vue實例下的，所以它不能在其它Vue實例下使用。
<div id="app2"> <!-- 不能使用my-component組件，因為my-component是一個局部組件，它屬於#app--> <my-component></my-component> </div> <script> new Vue({ el: '#app2' }); </script>
如果你這樣做了，瀏覽器會提示一個錯誤。
//注冊組件(全局 component)
Vue.component("my-component",{
template:'<div>這是一個全局組件測試 </div>'
});
new Vue({
el:"#app5"
})
//(局部components)
new Vue({
el:"#app6",
components:{
'test-component':{
template:"<div>這是一個局部的組件測試</div>"
}
}
});