vue 元件屬性 name的作用
阿新 • • 發佈:2021-06-28
元件是有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決定的