vue页面里的name究竟有什么用？

之前vue只是进行过简单学习，并且工作上并不常用，渐渐忘记了，今天重拾vue项目，看到了一个name属性，（因为之前都是不写的），故很好奇name属性有什么作用。

本人渣渣，希望互相学习，互相进步

递归组件运用（指组件自身组件调用自身组件）

 <template>
 <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>
复制代码

比如这个例子，组件本身就是DetailList，在调用时就不需要再用compents来声明了；

keep-alive包裹动态组件时，会缓存不活动的组件实例，会出现include和exclude属性，包含或者排除指定name组件

<div id="app"> 
   <keep-alive exclude="compA">
      <router-view/>
   </keep-alive>
</div>
复制代码

exclude=”compA” keep-alive属性对compA组件不生效

vue-tools插件调试

1. 组件未定义name属性
2. 组件将显示成，这很没有语义。
3. 通过提供name选项，可以获得更有语义信息的组件树。

————————————————
版权声明：本文为CSDN博主「星野丶」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：blog.csdn.net/qq_38999048…