快捷導(dǎo)航

vue內(nèi)置組件component--通過is屬性動(dòng)態(tài)渲染組件操作

更新時(shí)間：2020年07月28日 12:00:05 作者：梧桐落葉~

這篇文章主要介紹了vue內(nèi)置組件component--通過is屬性動(dòng)態(tài)渲染組件操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

我就廢話不多說了，大家看代碼吧~

<!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="首頁"/>
			<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ǔ)充知識：詳解vue組件的is特性：限制元素&動(dòng)態(tài)組件

在vue.js組件教程的一開始提及到了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元素，可以封裝可重用的代碼，可以增加開發(fā)效率。它是自定義元素，vue.js的編譯器為它添加特殊功能。有些情況，組件也可以是原生HTML元素的形式，以is特性進(jìn)行擴(kuò)展。

那么is特性究竟是什么呢？有什么用途呢？

1、限制元素

其實(shí)簡單的來說，因?yàn)関ue模板就是dom模板，使用的是瀏覽器原生的解析器進(jìn)行解析，所以dom模板的限制也就成為vue模板的限制了，要求vue模板是有效的HTML代碼片段。但是由于dom的一些html元素對放入它里面的元素有限制，所以導(dǎo)致有些組件沒辦法放在一些標(biāo)簽中，比如<ul></ul> <select></select><a></a> <table></table>等等這些標(biāo)簽中，所以需要增加is特性來擴(kuò)展，從而達(dá)到可以在這些受限制的html元素中使用。例如：

<ul>
 <li is="my-component"></li>
</ul>

而不能使用下面的方式，因?yàn)橄旅娴姆绞綍?huì)將自定義組件<my-component>當(dāng)做無效的內(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來掛載不同的組件。

<div id="app" 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;
        }
      }
    });

我們在components中注冊了三個(gè)模板，當(dāng)我們點(diǎn)擊當(dāng)前按鈕的時(shí)候，就會(huì)將模板切換模板，可以說是非常方便了。

以上這篇vue內(nèi)置組件component--通過is屬性動(dòng)態(tài)渲染組件操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: