1. 程式人生 > 其它 >vue 元件屬性 name的作用

vue 元件屬性 name的作用

元件是有name屬性的,匹配的就是元件的name。和vue-router中配置的name是不同的含義。

1.當專案使用keep-alive時,可搭配元件name進行快取過濾

配置<keep-alive>標籤的exclude或者include屬性做元件篩選
例項:
		<div id="app"> 
			<keep-alive exclude="Detail">
				<router-view/>
			</keep-alive>
		</div>

2.DOM做遞迴元件時

在自身元件呼叫自身的時候,可以通過定義name的值進行遞迴呼叫
例項:
		<div> 
			<div v-for="(item,index) of list" :key="index"> 
				<div> 
					<span class="item-title-icon"></span>{{item.title}} 
				</div> 
				<div v-if="item.children" > 
					<detail-list :list="item.children"></detail-list> 
				</div> 
			</div> 
		</div>
 
		<script>
			export default {
				name:'DetailList',//遞迴元件是指元件自身呼叫自身
				props:{
					list:Array
				}
			}
		</script>

3.當你用vue-tools時

vue-devtools除錯工具裡顯示的組見名稱是由vue中元件name決定的