vue 全域性/區域性元件
阿新 • • 發佈：2019-02-12
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <!-- 全域性元件簡寫--> <div id="example1"> <my-compoent></my-compoent> </div> <script> Vue.component('my-compoent',{ template:'<div>測試1</div>' }) new Vue({ el:'#example1' }) </script> <!-- 註冊全域性元件--> <div id="example2"> <my-compoent1></my-compoent1> </div> <script> //建立一個元件構造器 var myComponent = Vue.extend({ template:'<div> 測試2</div>' }) //註冊全域性元件： (z元件名稱 元件構造器) //Vue.component(tagName,options) Vue.component('my-compoent1',myComponent) new Vue({ el:'#example2' }) </script> <!-- 註冊區域性元件--> <div id="example3"> <my-compoent></my-compoent> </div> <div id="example4"> <my-compoent></my-compoent> </div> <script> //建立一個元件構造器 var myComponent = Vue.extend({ template:'<div> 區域性元件4</div>' }) //註冊元件 並指定元件的標籤 逐漸的html標籤為 my-compoent Vue.component('my-compoent',myComponent) new Vue({ el:'#example4', components:{ 'my-component':myComponent } }) </script> <!-- 父子元件 資料傳遞 父子元件的關係：通常元件A在它的模板中使用元件B，此時元件A為父元件，元件B為子元件。父子元件應該解耦， 元件例項的作用域是孤立的，子元件中不能直接使用父元件的資料。應該使用props傳遞父元件到子元件的資料， 子元件通過events給父元件發訊息，以此實現父子元件間的通訊。 如上，在其他元件內部用components宣告元件，即為區域性註冊。在Vue例項中用components註冊元件時， 可以理解為Vue例項為一個大的父元件，其他任何註冊的元件都是子元件。所以在註冊元件時， 如果要使用Vue例項data中的資料，都要用props傳遞Vue例項中的資料，讓Vue例項的資料在元件中可用。 還可以用v-bind動態繫結props的值到父元件的資料，父元件資料發生變化時，子元件的資料也相應的變化。 父--》子：父元件通過props傳遞父元件到子元件 子--》父：子元件通過events給父元件發訊息 --> <div id="test"> <template id="testProp"> <ul> <li v-for="book in books"> <p>{{book.title}}</p> <p>{{book.desc}}</p> <p>{{book.author}}</p> </li> </ul> <template> <test-prop :book-list = "books"></test-prop> </div> <script> var TestProp = Vue.extend({ template:'#testProp', props: ['book-list'] }); var test = new Vue({ el: '#test', data: function(){ return { books: [ { title: 'title1', desc: 'desc1', author: 'author1' }, { title: 'title2', desc: 'desc2', author: 'author2' }, { title: 'title3', desc: 'desc3', author: 'author3' }, ], } }, components:{ 'test-prop': TestProp, }, }); </script> </body> </html>