vue.js既然是框架，那就不能只是簡(jiǎn)單的完成數(shù)據(jù)模板引擎的任務(wù)，它還提供了頁(yè)面布局的功能。本文詳細(xì)介紹使用vue.js進(jìn)行頁(yè)面布局的強(qiáng)大工具，vue.js組件系統(tǒng)。
Vue.js組件系統(tǒng)
每一個(gè)新技術(shù)的誕生，都是為了解決特定的問(wèn)題。組件的出現(xiàn)就是為了解決頁(yè)面布局等等一系列問(wèn)題。vue中的組件分為兩種，全局組件和局部組件。
組件的注冊(cè)
全局組件的注冊(cè)
通過(guò)Vue.component()創(chuàng)建一個(gè)全局組件之后，我們可以在一個(gè)通過(guò) new Vue 創(chuàng)建的 Vue 根實(shí)例中，把這個(gè)組件作為自定義元素來(lái)使用。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="app"> <!--第二步，使用--> <global_component></global_component> </div> <script> // 第一步，注冊(cè) Vue.component("global_component", { template: ` <div> <h2>Hello Vue</h2> </div> ` }); new Vue({ el: "#app", }); </script></body></html>組件的參數(shù)
因?yàn)榻M件是可復(fù)用的 Vue 實(shí)例,所以它們與 new Vue 接收相同的選項(xiàng)，例如 data 、 computed 、 watch 、 methods 以及生命周期鉤子等。僅有的例外是像 el 這樣根實(shí)例特有的選項(xiàng)。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="app"> <!--第二步，使用--> <global_component></global_component> </div> <script> // 第一步，注冊(cè) Vue.component("global_component", { data: function () { return { count: 0 } }, template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>` }); new Vue({ el: "#app", }); </script></body></html>組件的復(fù)用
每個(gè)實(shí)例維護(hù)自己的一份獨(dú)立的數(shù)據(jù)。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="app"> <!--第二步，使用--> <global_component></global_component> <global_component></global_component> <global_component></global_component> </div> <script> // 第一步，注冊(cè) Vue.component("global_component", { data: function () { return { count: 0 } }, template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>` }); new Vue({ el: "#app", }); </script></body></html>注意當(dāng)點(diǎn)擊按鈕時(shí)，每個(gè)組件都會(huì)各自獨(dú)立維護(hù)它的 count 。因?yàn)槟忝坑靡淮谓M件，就會(huì)有一個(gè)它的新 實(shí)例 被創(chuàng)建。
Data必須是一個(gè)函數(shù)
data必須是一個(gè)函數(shù)，因此每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝, 也可以寫(xiě)成如下形式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="app"> <!--第二步，使用--> <global_component></global_component> <global_component></global_component> <global_component></global_component> </div> <script> // 第一步，注冊(cè) Vue.component("global_component", { data(){ return { count: 0 } }, template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>` }); new Vue({ el: "#app", }); </script></body></html>局部組件的注冊(cè)
全局注冊(cè)往往是不夠理想的。比如，如果你使用一個(gè)像 webpack 這樣的構(gòu)建系統(tǒng)，全局注冊(cè)所有的組件意味著即便你已經(jīng)不再使用一個(gè)組件了，它仍然會(huì)被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript 的無(wú)謂的增加。
全局組件始終是存在的，除非程序結(jié)束，如果組件越來(lái)越大，那么程序所占用的空間和消耗的性能就會(huì)更大。
所以我們需要局部組件。不用的時(shí)候，被垃圾回收。
局部組件的第一種使用方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="component-demo"> <!--最后在根元素當(dāng)中使用它--> <!--第一個(gè)中使用方式，會(huì)把當(dāng)前div渲染進(jìn)DOM--> <my-header></my-header> </div> <script> // 定義一個(gè)局部組件，其實(shí)就是一個(gè)變量，它是一個(gè)object類型 // 屬性與全局組件是一樣的 let Header = { template: ` <button @click="count++">{{ count }}</button> `, data() { return { count: 0 } } }; new Vue({ el: "#component-demo", // 第二部，需要在根實(shí)例當(dāng)中使用它 components: { 'my-header': Header } }); </script></body></html>局部組件的第二種使用方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="component-demo"> </div> <script> // 定義一個(gè)局部組件，其實(shí)就是一個(gè)變量，它是一個(gè)object類型 // 屬性與全局組件是一樣的 let Header = { template: ` <button @click="count++">{{ count }}</button> `, data() { return { count: 0 } } }; new Vue({ el: "#component-demo", // 第二種使用方式，不會(huì)將div渲染進(jìn)DOM，以template為根元素 template: `<my-header></my-header>`, // 第二步，需要在根實(shí)例當(dāng)中使用它 components: { 'my-header': Header } }); </script></body></html>對(duì)于 components 對(duì)象中的每個(gè)屬性來(lái)說(shuō)，其屬性名就是自定義元素的名字，其屬性值就是這個(gè)組件的選項(xiàng)對(duì)象。
在局部組件中使用子組件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script> <style> body { margin: 0; } .box { width: 100%; height: 50px; background-color: #2aabd2; } </style></head><body> <div id="component-demo"> </div> <script> // 定義一個(gè)局部組件，其實(shí)就是一個(gè)變量，它是一個(gè)object類型 // 這個(gè)對(duì)象的屬性與全局組件是一樣的(除el屬性外) let Fcontent = { template: ` <div> <span>這是頭條</span> </div> ` }; let Header = { template: ` <div v-bind:class='{box: isBox}'> <button @click="count++">{{ count }}</button> <first-content></first-content> </div> `, data() { return { count: 0, isBox: true } }, components: { 'first-content': Fcontent } }; new Vue({ el: "#component-demo", // 第二種使用方式，不會(huì)將div渲染進(jìn)DOM，以template為根元素 template: `<my-header></my-header>`, // 第二步，需要在根實(shí)例當(dāng)中使用它 components: { 'my-header': Header } }); </script></body></html>注:
1.注意寫(xiě)組件標(biāo)簽
2.每個(gè)組件的template只識(shí)別一個(gè)作用域塊
通信
父子組件的通信
在父組件中給子組件綁定屬性,子組件通過(guò)props=["屬性名稱"]
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script> <style> body { margin: 0; } .box { width: 100%; height: 50px; background-color: #2aabd2; } </style></head><body> <div id="component-demo"> </div> <script> // 定義一個(gè)局部組件，其實(shí)就是一個(gè)變量，它是一個(gè)object類型 // 屬性與全局組件是一樣的 let Fcontent = { template: ` <div> <span>這是頭條</span> {{ fdata }} </div> `, props: ['fdata'] }; let Header = { template: ` <div v-bind:class='{box: isBox}'> <button @click="count++">{{ count }}</button> <first-content :fdata="fathData"></first-content> </div> `, data() { return { count: 0, isBox: true, fathData: "我是你爸爸~~~" } }, components: { 'first-content': Fcontent } }; new Vue({ el: "#component-demo", // 第二種使用方式，不會(huì)將div渲染進(jìn)DOM，以template為根元素 template: `<my-header></my-header>`, // 第二步，需要在根實(shí)例當(dāng)中使用它 components: { 'my-header': Header } }); </script></body></html>子父組件的通信
父組件在mounted的時(shí)候，監(jiān)聽(tīng)一個(gè)自定義事件。
給子組件綁定一個(gè)click事件之后，通過(guò)內(nèi)建的方法$emit在父組件上觸發(fā)一個(gè)事件，這個(gè)時(shí)間就是父組件監(jiān)聽(tīng)的自定義事件。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script> <style> body { margin: 0; } .box { width: 100%; height: 50px; background-color: #2aabd2; } </style></head><body> <div id="component-demo"> </div> <script> // 定義一個(gè)局部組件，其實(shí)就是一個(gè)變量，它是一個(gè)object類型 // 屬性與全局組件是一樣的 let Fcontent = { template: ` <div> <button v-on:click="myClick">放大父組件字體</button> </div> `, methods: { myClick: function () { console.log(this); this.$emit('change-font', 0.1); console.log(this); } } }; let Header = { template: ` <div v-bind:class='{box: isBox}'> <first-content v-on:change-font="changeFont"></first-content> <span :style="{ fontSize: postFontSize + 'em' }">Hello Vue</span> </div> `, data() { return { count: 0, isBox: true, fathData: "我是你爸爸~~~", postFontSize: 1 } }, components: { 'first-content': Fcontent }, methods: { changeFont: function (value) { this.postFontSize += value; } } }; const VM = new Vue({ el: "#component-demo", // 第二種使用方式，不會(huì)將div渲染進(jìn)DOM，以template為根元素 template: `<my-header></my-header>`, // 第二步，需要在根實(shí)例當(dāng)中使用它 components: { 'my-header': Header } }); </script></body></html>非父子通信
其中一個(gè)組件向中間調(diào)度器提交事件,另一個(gè)組件監(jiān)聽(tīng)中間調(diào)度器的事件
混入
混入可以提高代碼的重用性。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.js"></script></head><body> <div id="mixin-demo"> <my-alex></my-alex> <p></p> <my-peiqi></my-peiqi> </div> <script> let mixs = { methods: { show: function (name) { console.log(`${name} is here!`); }, hide: function (name) { console.log(`${name} is gone!`); }, } }; let myAlex = { template: ` <div> <button @click="show('alex')">點(diǎn)我顯示alex</button> <button @click="hide('alex')">點(diǎn)我隱藏alex</button> </div> `, mixins: [mixs], }; let myPeiqi = { template: ` <div> <button @mouseenter="show('peiqi')">鼠標(biāo)移入顯示沛齊</button> <button @mouseleave="hide('peiqi')">鼠標(biāo)離開(kāi)隱藏沛齊</button> </div> `, mixins: [mixs], }; new Vue({ el: "#mixin-demo", components: { "my-alex": myAlex, "my-peiqi": myPeiqi, } }) </script></body></html>插槽
有時(shí)候我們需要向組件傳遞一些數(shù)據(jù)，這時(shí)候可以使用插槽.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .nav-link { width: 100px; height: 100px; background-color: #2aabd2; float: left; margin-left: 5px; text-align: center; line-height: 100px; } </style> <script src="../statics/vue.js"></script></head><body> <div id="app01"> <com-content>登錄</com-content> <com-content>注冊(cè)</com-content> <com-content>最熱</com-content> <com-content>段子</com-content> <com-content>42區(qū)</com-content> <com-content>圖片</com-content> </div> <script> Vue.component('com-content', { template: ` <div class="nav-link"> <slot></slot> </div> ` }); new Vue({ el: "#app01", }) </script></body></html>具名插槽
操作使用了組件的復(fù)用，如果我們?cè)谕粋€(gè)組件內(nèi)寫(xiě)入不同的頁(yè)面呢？此時(shí)，我們需要多個(gè)插槽，并且給不同的內(nèi)容命名。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .nav-link { width: 100px; height: 100px; background-color: #2aabd2; float: left; margin-left: 5px; text-align: center; line-height: 100px; } </style> <script src="../statics/vue.js"></script></head><body> <div id="app01"> <base-layout> <template slot="header"> <h1>這是標(biāo)題欄</h1> </template> <template> <h2>這是內(nèi)容</h2> </template> <template slot="footer"> <h3>這是頁(yè)腳</h3> </template> </base-layout> </div> <script> let baseLayout = { template: ` <div class="container"> <header> <slot name="header"></slot> </header> <main><slot></slot></main> <footer> <slot name="footer"></slot> </footer> </div> ` }; new Vue({ el: "#app01", components: { "base-layout": baseLayout } }) </script></body></html>我們還是可以保留一個(gè)未命名插槽，這個(gè)插槽是 默認(rèn)插槽 ，也就是說(shuō)它會(huì)作為所有未匹配到插槽的內(nèi)容的統(tǒng)一出口。
在組件上使用v-model
自定義事件也可以用于創(chuàng)建支持 v-model 的自定義輸入組件。記住：
<input v-model="searchText">
等價(jià)于：
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value"
>
當(dāng)用在組件上時(shí)， v-model 則會(huì)這樣：
<custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input>
為了讓它正常工作，這個(gè)組件內(nèi)的 <input> 必須：
將其 value 特性綁定到一個(gè)名叫 value 的 prop 上
在其 input 事件被觸發(fā)時(shí)，將新的值通過(guò)自定義的 input 事件拋出
寫(xiě)成代碼之后是這樣的：
Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > `})現(xiàn)在 v-model 就應(yīng)該可以在這個(gè)組件上完美地工作起來(lái)了：
<custom-input v-model="searchText"></custom-input>
如下是在組件中使用v-model示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="app"> </div> <script> let Model = { template: ` <div> <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" /> <h1>{{ value }}</h1> `, props: ['value'] }; let App = { template: ` <div> <custom-input v-model="searchText"></custom-input> `, components: { 'custom-input': Model, }, data(){ return { searchText: "", } } }; new Vue({ el: "#app", template: `<App></App>`, components: { App, } }) </script></body></html>使用組件的注意事項(xiàng)
注意事項(xiàng)一：?jiǎn)蝹€(gè)根元素
當(dāng)構(gòu)建一個(gè)內(nèi)容頁(yè)面的組件時(shí)，我們的組件可能包含多個(gè)HTML標(biāo)簽。
<h1>Hello World</h1><h2>Hello Vue</h2>
然而如果你在模板中嘗試這樣寫(xiě)，Vue 會(huì)顯示一個(gè)錯(cuò)誤，并解釋道 every component must have a single root element (每個(gè)組件必須只有一個(gè)根元素) 。你可以將模板的內(nèi)容包裹在一個(gè)父元素內(nèi)，來(lái)修復(fù)這個(gè)問(wèn)題，例如：
<div> <h1>Hello World</h1> <h2>Hello Vue</h2></div>
注意事項(xiàng)二：解析特殊HTML元素
有些 HTML 元素，諸如 <ul> 、 <ol> 、 <table> 和 <select> ，對(duì)于哪些元素可以出現(xiàn)在其內(nèi)部是有嚴(yán)格限制的。而有些元素，諸如 <li> 、 <tr> 和 <option> ，只能出現(xiàn)在其它某些特定的元素內(nèi)部。
這會(huì)導(dǎo)致我們使用這些有約束條件的元素時(shí)遇到一些問(wèn)題。例如：
<table> <blog-post-row></blog-post-row></table>
這個(gè)自定義組件 <blog-post-row> 會(huì)被作為無(wú)效的內(nèi)容提升到外部，并導(dǎo)致最終渲染結(jié)果出錯(cuò)。幸好這個(gè)特殊的 is 特性給了我們一個(gè)變通的辦法：
<table> <tr is="blog-post-row"></tr></table>
需要注意的是如果我們從以下來(lái)源使用模板的話，這條限制是不存在的：
字符串 (例如：template: '...')
單文件組件 (.vue) <script type="text/x-template">
使用組件實(shí)現(xiàn)路飛導(dǎo)航欄
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script> <!-- 引入樣式 --> <link rel="stylesheet" > <!-- 引入組件庫(kù) --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <style> body { margin: 0; padding: 0; } .header { position: fixed; top: 0; left: 0; width: 100%; } .el-menu { display: flex; align-items: center; justify-content: center; } .footer { position: fixed; bottom: 0; left: 0; width: 100%; } .header img { position: absolute; left: 80px; top: -4px; width: 118px; height: 70px; z-index: 999; } </style></head><body> <div id="app"> </div> <template id="header"> <div class="header"> <img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg"/> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"> <el-menu-item index="1">首頁(yè)</el-menu-item> <el-menu-item index="2">免費(fèi)課程</el-menu-item> <el-menu-item index="3">輕課</el-menu-item> <el-menu-item index="4">學(xué)位課程</el-menu-item> <el-menu-item index="5">智能題庫(kù)</el-menu-item> <el-menu-item index="6">公開(kāi)課</el-menu-item> <el-menu-item index="7">內(nèi)部教材</el-menu-item> <el-menu-item index="8">老男孩教育</el-menu-item> </el-menu> </div> </template> <template id="footer"> <div class="footer"> <el-menu class="el-menu-demo" mode="horizontal" background-color="black"> <el-menu-item index="1">關(guān)于我們</el-menu-item> <el-menu-item index="2">聯(lián)系我們</el-menu-item> <el-menu-item index="3">商業(yè)合作</el-menu-item> <el-menu-item index="4">幫助中心</el-menu-item> <el-menu-item index="5">意見(jiàn)反饋</el-menu-item> <el-menu-item index="6">新手指南</el-menu-item> </el-menu> </div> </template> <script> let pageHeader = { template: "#header", data() { return { activeIndex: "1", } } }; let pageFooter = { template: "#footer", }; let App = { template: ` <div> <div> <page-header></page-header> </div> <div> <page-footer></page-footer> </div> </div> `, components: { 'page-header': pageHeader, 'page-footer': pageFooter, } }; new Vue({ el: "#app", template: `<app></app>`, components: { 'app': App, } }) </script></body></html>效果圖:
總結(jié)
以上所述是小編給大家介紹的Vue.js中的組件系統(tǒng),希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
