組件可以擴展HTML元素，封裝可重用的HTML代碼，我們可以將組件看作自定義的HTML元素。組件系統提供了一種抽象，讓我們可以使用獨立可復用的小組件來構建大型應用。
一個簡單組件例子(全局注冊）
<!DOCTYPE html> <html><body><div id="app"><!-- 3. #app是Vue實例掛載的元素，應該在掛載元素范圍內使用組件--><the-component></the-component></div></body><script src="js/vue.js"></script><script>// 1.創建一個組件構造器var myComponent = Vue.extend({template: '<div> my first component!</div>'})// 2.注冊組件，并指定組件的標簽，組件的HTML標簽為<the-component> Vue.component('the-component', myComponent)new Vue({el: '#app'});</script> </html>
運行結果：
分析：
1.Vue.extent() 是Vue構造器的擴展，調用Vue.extend()創建的是一個組件構造器，而不是一個具體的組件實例。它里面的選項對象的template屬性用于定義組件要渲染的HTML。
2.Vue.component() 注冊組件時，需要提供2個參數，第一個參數是組件的標簽，第二個是組件構造器。它調用了組件構造器myComponent，創建一個組件實例。
3.組件應該掛載在某個Vue實例下，
new Vue({el: '#app' });
這段代碼必須要有，表示掛載在#app元素上，否則不會生效。
局部注冊：
<script>// 1.創建一個組件構造器var myComponent = Vue.extend({template: '<div> my first2 component!</div>'})new Vue({el: '#app',components: {// 2. 將myComponent組件注冊到Vue實例下'the-component' : myComponent}});</script>
父組件和子組件
可以在組件中定義并使用其他組件，構成父子組件關系。
例子：（注意版本用vue.js 1.0的，2.0版本，button都出現不了）
<!DOCTYPE html> <html><head><meta charset="utf-8"></head><body><!-- 子組件模板 --><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></body><script src="http://cdn.bootcss.com/vue/1.0.0-csp/vue.js"></script><script>// 注冊子組件// 將當前消息派發出去 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)}}})</script> </html>
運行結果：
props示例
<!DOCTYPE html> <html><head><meta charset="utf-8"></head><body><template id="myComponent"><table><tr><th colspan="2">子組件數據</th></tr><tr><td>myname</td><td v-text="myName"></td></tr><tr><td>myage</td><td v-text="myAge"></td></tr></table></template><div id="app"><my-component v-bind:my-name="name" v-bind:my-age="age"></my-component></div></body><script src="http://cdn.bootcss.com/vue/1.0.0-csp/vue.js"></script><script>var vm = new Vue({el: '#app',data: {name: 'wangjuan',age: 24},components: {'my-component': {template: '#myComponent',props: ['myName', 'myAge']}}});</script> </html>
結果為：
prop雙向綁定
<!DOCTYPE html> <html><head><meta charset="utf-8"></head><body><template id="myComponent"><table><tr><th colspan="3">子組件數據</th></tr><tr><td>myname:</td><td v-text="myName"></td><td><input type="text" v-model="myName" /></td></tr><tr><td>myage:</td><td v-text="myAge"></td><td><input type="text" v-model="myAge" /></td></tr></table></template><div id="app"><table><tr><th colspan="3">父組件數據</th></tr><tr><td>name:</td><td>{{ name }}</td><td><input type="text" v-model="name" /></td></tr><tr><td>age:</td><td>{{ age }}</td><td><input type="text" v-model="age" /></td></tr></table><my-component v-bind:my-name="name" v-bind:my-age="age"></my-component></div></body><script src="http://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js"></script><script>var vm = new Vue({el: '#app',data: {name: 'wangjuan',age: 24},components: {'my-component': {template: '#myComponent',props: ['myName', 'myAge']}}});</script> </html>
結果：
prop默認是單向綁定，不過這里我感覺默認是雙向綁定，不知道哪里出問題了。。。
使用.sync或.once 綁定修飾符顯式地強制雙向或單次綁定。
子組件可以用this.$parent訪問它的父組件。根實例的后代可以用this.$root訪問它。父組件有一個數組this.$children，包含它所有的子元素。
?
