vue內(nèi)置組件component--通過(guò)is屬性動(dòng)態(tài)渲染組件操作
我就廢話不多說(shuō)了，大家看代碼吧~
<!DOCTYPE html><html><head><meta charset='utf-8'><title></title><script src='https://cdn.jsdelivr.net/npm/vue'></script><script src='https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js'></script><script src='https://unpkg.com/axios/dist/axios.min.js'></script></head><body><div id='app'><input @click='currentrouter=’Home’' type='button' value='首頁(yè)'/><input @click='currentrouter=’Fenlei’' type='button' value='分類'/><input @click='currentrouter=’My’' type='button' value='我的'/><!-- 動(dòng)態(tài)組件 component --><component :is='currentrouter'></component></div><template id='home'><div>{{msg}}</div></template><template id='fenlei'><div>{{msg}}</div></template><template id='my'><div>{{msg}}</div></template><script>//局部定義三個(gè)組件const Home = {template:'#home',data(){return{msg:'這里是home組件'}}}const Fenlei = {template:'#fenlei',data(){return{msg:'這里是fenlei組件'}}}const My = {template:'#my',data(){return{msg:'這里是my組件'}},}//vue 實(shí)例var vm = new Vue({el:'#app',components:{Home,Fenlei,My},data:{msg:'hello world',currentrouter:'Home'},methods:{}})</script></body></html>
補(bǔ)充知識(shí)：詳解vue組件的is特性：限制元素&動(dòng)態(tài)組件
在vue.js組件教程的一開(kāi)始提及到了is特性
意思就是有些元素，比如 ul 里面只能直接包含 li元素，像這樣：
<ul> <li></li></ul>//而不能：<ul> <your-component></ul>
這樣就不能復(fù)用your-component這個(gè)組件了，如果要達(dá)到我們的目的，我們就要使用is特性像這樣：
<ul> <li is='your-component'></li></ul>
組件功能是vue項(xiàng)目的一大特色。組件可以擴(kuò)展html元素，可以封裝可重用的代碼，可以增加開(kāi)發(fā)效率。它是自定義元素，vue.js的編譯器為它添加特殊功能。有些情況，組件也可以是原生HTML元素的形式，以is特性進(jìn)行擴(kuò)展。
那么is特性究竟是什么呢？有什么用途呢？
1、限制元素
其實(shí)簡(jiǎn)單的來(lái)說(shuō)，因?yàn)関ue模板就是dom模板，使用的是瀏覽器原生的解析器進(jìn)行解析，所以dom模板的限制也就成為vue模板的限制了，要求vue模板是有效的HTML代碼片段。但是由于dom的一些html元素對(duì)放入它里面的元素有限制，所以導(dǎo)致有些組件沒(méi)辦法放在一些標(biāo)簽中，比如<ul></ul> <select></select><a></a> <table></table>等等這些標(biāo)簽中，所以需要增加is特性來(lái)擴(kuò)展，從而達(dá)到可以在這些受限制的html元素中使用。例如：
<ul> <li is='my-component'></li></ul>
而不能使用下面的方式，因?yàn)橄旅娴姆绞綍?huì)將自定義組件<my-component>當(dāng)做無(wú)效的內(nèi)容，導(dǎo)致錯(cuò)誤的渲染結(jié)果
<ul> <my-component></mu-component><ul>
其實(shí)兩種寫法表達(dá)的意思是一致，但是第二種寫法是不合法的，會(huì)導(dǎo)致錯(cuò)誤。
2、動(dòng)態(tài)組件
在我們平時(shí)使用vue中的模板的時(shí)候，許多時(shí)候都是直接定義成一個(gè)固定的模板，但是，vue中提供了一個(gè)動(dòng)態(tài)模板，可以在任意模板中切換，就是用vue中<component>用:is來(lái)掛載不同的組件。
<div v-cloak> <component :is='currentView'></component> <button @click='handleChangeView(’A’)'>A</button> <button @click='handleChangeView(’B’)'>B</button> <button @click='handleChangeView(’C’)'>C</button></div> var app = new Vue({ el: ’#app’, components:{comA:{ template:` <div>組件A</div> `},comB:{ template:` <div>組件B</div> `},comC:{ template:` <div>組件C</div> `} }, data:{currentView:’comA’ }, methods:{handleChangeView:function(component){ this.currentView=’com’+component;} } });
我們?cè)赾omponents中注冊(cè)了三個(gè)模板，當(dāng)我們點(diǎn)擊當(dāng)前按鈕的時(shí)候，就會(huì)將模板切換模板，可以說(shuō)是非常方便了。
以上這篇vue內(nèi)置組件component--通過(guò)is屬性動(dòng)態(tài)渲染組件操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
網(wǎng)公網(wǎng)安備