您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“VUE組件怎么定義使用”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“VUE組件怎么定義使用”吧!
全局組件的語(yǔ)法是:vue.component(‘組件名’,{配置選項(xiàng)});
然后,我們進(jìn)一步理解一下,組件名應(yīng)該怎么定義:組件名的定義規(guī)則是,使用短橫線分隔命名,字母小寫并且還需要一個(gè)連字符。配置選項(xiàng)對(duì)象:創(chuàng)建的配置選項(xiàng)的對(duì)象和new Vue創(chuàng)建的配置的實(shí)例接收相同的選項(xiàng)對(duì)象,這些對(duì)象屬性里面有:data、computed、methods等等
一個(gè)組價(jià)可以預(yù)定義很多選項(xiàng),最核心的是一下兩個(gè)
結(jié)構(gòu)模板template
這個(gè)模板聲明了數(shù)據(jù)?最終顯示給用戶的DOM之間的映射關(guān)系。但是要注意的是,該結(jié)構(gòu)模板中,只能有一個(gè)根節(jié)點(diǎn)。
初始數(shù)據(jù)data
data可以定義組件的初始數(shù)據(jù),和newVue的data選項(xiàng)的定義不一樣,組件是可以復(fù)用的,所以數(shù)據(jù)要定義成私有的轉(zhuǎn)態(tài),打data定義成一個(gè)函數(shù),并且要求返回一個(gè)函數(shù)對(duì)象。
說(shuō)了那么多理論的東西,可能不了解,那我我們上代碼。全局組件在全局都是可以調(diào)用的,調(diào)用的方式跟標(biāo)簽的調(diào)用方式是一樣的,只需要將標(biāo)簽名改成組件名就可以了。
代碼實(shí)例:
<!DOCTYPE html> <html lang="en"> <head> <title>組件</title> </head> <body> <div id="app"> <button-counter></button-counter> <button-counter></button-counter> </div> <div id="app1"> <button-counter></button-counter> <button-counter></button-counter> </div> <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> Vue.component('button-counter',{ template:`<button v-on:click="add">您在這里按下了{(lán){count}}次!</button>`, data:function(){ return{ count:0 } }, methods:{ add:function(){ this.count++ }, } }); var vml = new Vue({ el:"#app", }) var vm2 =new Vue({ el:"#app1", }) </script> </body> </html>
運(yùn)行結(jié)果:
在代碼這個(gè)中,button-counter已經(jīng)是全局組件,可以在vm1和vm2掛載使用,在其范圍之內(nèi)都可使用。組件定義后可以進(jìn)行多從的使用,在vue實(shí)例vm1和vm2的掛載范圍分別地道用了兩次組件,而且組件間數(shù)據(jù)都是相互獨(dú)立,不管不按哪一個(gè)按鈕都是互相不受不影響的。
局部組件的定義是:定義在vue實(shí)例上面的,在哪一個(gè)實(shí)例上面的定義,就在哪個(gè)實(shí)例所掛載的區(qū)域里面進(jìn)行使用。
使用的配置項(xiàng)component,一個(gè)實(shí)例可以進(jìn)行配置多個(gè)組件,多個(gè)組件配置在一個(gè)對(duì)象中。局部組件只有在定義在它的實(shí)例掛載的區(qū)域內(nèi)進(jìn)行使用,而且調(diào)用的方法和全局組件調(diào)用的方法是如出一轍的。
代碼實(shí)例:
<!DOCTYPE html> <html lang="en"> <head> <title>組件</title> </head> <body> <div id="app"> <!-- 頭部,你隨意定,你寫中文拼音都可以 --> <top></top> <!-- 中部 --> <middle></middle> <!-- 尾部 --> <bottom></bottom> </div> <div id="app1"> <top></top> </div> <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> var vml = new Vue({ el:"#app", components:{ "top":{ template:`<div> <h4>頭部標(biāo)題</h4> <p>12121212</p> </div>` }, "middle":{ template:`<div> <h4>中部題目</h4> <p>10086</p> </div>` }, "bottom":{ template:`<div> <h4>尾部題目</h4> <p>歡迎來(lái)到丘比特的博客</p> <p>QQ:2237814512</p> </div>` }, } }) var vm2 =new Vue({ el:"#app1", }) </script> </body> </html>
運(yùn)行結(jié)果:
在實(shí)例中我們定義了頭中尾三個(gè)組件,在vm1掛載的#app區(qū)域里面可以使用這三個(gè)組件 ,但是在#app1不可以使用。我們可以看到vm1掛載的#app區(qū)域內(nèi)調(diào)用的三個(gè)組件可以顯示出來(lái),但是在vm2掛載的#app1區(qū)域內(nèi)調(diào)用的top組件沒有被渲染,我們打開console可以看到錯(cuò)誤,在元素element可以看到被解釋的代碼。
到此,相信大家對(duì)“VUE組件怎么定義使用”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。