組件能夠擴展HTML元素,封裝可重用的HTML代碼,咱們能夠將組件看做自定義的HTML元素。組件系統提供了一種抽象,讓咱們能夠使用獨立可複用的小組件來構建大型應用。css
<!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>
運行結果:html
分析:vue
1.Vue.extent() 是Vue構造器的擴展,調用Vue.extend()建立的是一個組件構造器,而不是一個具體的組件實例。它裏面的選項對象的template屬性用於定義組件要渲染的HTML。json
2.Vue.component() 註冊組件時,須要提供2個參數,第一個參數是組件的標籤,第二個是組件構造器。它調用了組件構造器myComponent,建立一個組件實例。數組
3.組件應該掛載在某個Vue實例下,app
new Vue({ el: '#app' });
這段代碼必需要有,表示掛載在#app元素上,不然不會生效。this
<script> // 1.建立一個組件構造器 var myComponent = Vue.extend({ template: '<div> my first2 component!</div>' }) new Vue({ el: '#app', components: { // 2. 將myComponent組件註冊到Vue實例下 'the-component' : myComponent } }); </script>
能夠在組件中定義並使用其餘組件,構成父子組件關係。spa
例子:(注意版本用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>
運行結果:code
<!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>
結果爲:
<!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,包含它全部的子元素。