1. 程式人生 > >vue檔案中name屬性作用

vue檔案中name屬性作用

官方文件解釋

image.png

1.遞迴元件運用(指元件自身元件呼叫自身元件)

  <article>
    <div class="item" v-for="(item,index) in list" :key="index">
      <div class="item-title">
        <span class="item-title-ticket"></span>
        {{item.title}}</div>
        <div v-if="item.children" class="item-children">
        <detail-list :list="item.children"></detail-list>
      </div>
    </div>
  </article>
</template>
<script>
export default {
  name: "DetailList",  /*指元件自身元件呼叫自身元件*/
  props: {
    list: Array
  },
  data() {
    return {};
  }
};
</script>

2. keep-alive包裹動態元件時,會快取不活動的元件例項,會出現include和exclude屬性,包含或者排除指定name元件

<div id="app"> 
   <keep-alive exclude="compA">
      <router-view/>
   </keep-alive>
</div>

exclude="compA"   keep-alive屬性對compA元件不生效

3.vue-tools外掛除錯

  • 元件未定義name屬性
  • 元件將顯示成,這很沒有語義。
  • 通過提供name選項,可以獲得更有語義資訊的元件樹。