您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關如何在Vue中使用組件,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據(jù)這篇文章可以有所收獲。
//1、創(chuàng)建組件構造器 let overallDiv=Vue.extend({ template:` <div> <p>這是一個全局組件div</p> </div> ` }); //2、注冊全局組件 Vue.component('overall-div',overallDiv); //3、實例化,組件只有在實例化的div內才能使用,不可以直接在頁面中使用 let vue=new Vue({ el:'#app', data:{}, //在實例內注冊局部組件,其創(chuàng)建與注冊可以合為一步來寫 components:{ 'local-div':{ template: ` <div> <p>這是一個局部組件div</p> </div> ` } }, methods:{ } });
在HTML頁面實例化的div中使用組件:
<div id="app"> <local-div></local-div> <overall-div></overall-div> </div>
注意:一些HTML標簽對放入其中的標簽有限制,這時需要通過is屬性將組件轉化為你要放入的組件,例如<ul>標簽下只能放<li>,這時,你可以使用<li is="my-component">,這樣就相當于放入了<my-component>標簽。
組件的模板除了在js中創(chuàng)建外,還可以使用頁面中的template創(chuàng)建模板,注意頁面中的模板只能有一個根元素,如有多個元素需要包含在一個div內,例如頁面body中的模板:
<template id="myTmp"> <div> <p>這是頁面中的模板</p> </div> </template>
在js中通過id號注冊模板。
Vue.component('my-tmp',{ template:'#myTmp' });
在組件中使用data必須以函數(shù)的形式返回,如果以屬性值的形式存在,所有的組件會共享一個屬性值,更改其中一個,所有的組件都會收到影響。例如一個統(tǒng)計被點擊次數(shù)的組件:
<template id="myBtn"> <div> <button @click="count++">按鈕被點擊{{count}}次</button> </div> </template>
Vue.component('my-btn',{ template:'#myBtn', data () { //以函數(shù)返回的方式定義組件使用的data return { count:0 }; } }); <div id="app"> <my-btn></my-btn> <my-btn></my-btn> </div>
在頁面中分別點擊兩個按鈕,兩個按鈕組件的count分別計數(shù),不會互相干擾:
先創(chuàng)建子組件,然后再父組件內進行注冊,就可以在父組件的模板內使用子組件,然后再注冊父組件,這樣就可以在外部調用包含子組件的父組件了,外部直接使用父組件接口,而不需要知道內部子組件的實現(xiàn)
注意在外部不能直接使用子組件,因為它只在父組件內進行了注冊,外部看不到子組件
let child1=Vue.extend({ template:`<div>這是子組件1</div>` }); let child2=Vue.extend({ template:`<div>這是子組件2</div>` }); Vue.component('parent',{ components:{ 'c1':child1, 'c2':child2 }, //在父組件內調用子組件 template:`<div>父組件<c1></c1><c2></c2></div>` }); <div id="app"> <parent></parent> </div>
結果如圖:
像生活中的容器一樣,slot允許向其中插入標簽、組件等內容,而在外部提供一個框子包裝起來。slot分為匿名插槽與實名插槽,匿名插槽可以向其中插入任何類型的內容。
實名slot可以將內容插入指定的插槽內,就像一臺電腦的主板,cpu、內存條分別有自己對應的插槽,實名插槽在模板中通過name屬性規(guī)定插槽的名字,在使用時,通過標簽的slot屬性指定對應的name,可以將標簽插入指定的插槽。
匿名插槽
<!--匿名插槽--> <template id="anonymousDiv"> <div > <h4>這是插槽頭部</h4> <slot>插槽默認顯示內容</slot> <hr/> <p>插槽尾部</p> </div> </template> let vue2=new Vue({ el:'#app2', data:{ }, components:{ //綁定匿名插槽 'anonymous-slot':{ template:'#anonymousDiv' }, //綁定實名插槽 'realname-slot':{ template:'#realnameDiv' } } });
向cpu插槽內插入內容:
<div id="app2"> <anonymous-slot> <p>向插槽中插入一段文字</p> </anonymous-slot> </div>
插槽未放入內容時:插入一段文字:
實名插槽
<template id="realnameDiv"> <div> <h4>實名插槽頭部</h4> <slot name="cpu">這是cpu插槽</slot> <slot name="memery">這是內存條插槽</slot> <slot name="HardDisk">這是硬盤插槽</slot> </div> </template> <realname-slot> <p slot="cpu">Intel Core i5</p> </realname-slot>
Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結構的分離、虛擬DOM、運行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗。
看完上述內容,你們對如何在Vue中使用組件有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注億速云行業(yè)資訊頻道,感謝大家的支持。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。