vue组件name属性的作用和组件递归实现数据树

在vue组件注册时,会有一个name属性,那么vue组件注册的时候的name属性有什么作用呢?
先来看看官网,如下所示:
在这里插入图片描述

简单来说就是:

  1. 允许组件模板递归地调用自身
  2. 便于调试 (包括警告信息以及通过vue-devtools调试时可以更方便的定位到组件)
  3. 便于获取更有语义信息的组件树
  4. 还有一点,就是,可以配合keep-alive进行组件 搭配组件name进行缓存过滤

具体应用场景:

  1. 组件模板递归地调用自身
    在这里插入图片描述
    效果如下:
    在这里插入图片描述

  2. 便于调试,如上面的递归在vue-devtools调试时的结构如下, 可以清晰地看到页面组件的构成:
    在这里插入图片描述

  3. 配合keep-alive进行组件 搭配组件name进行缓存过滤

<keep-alive exclude="treeMenu">
  <router-view/>
 </keep-alive>
发布了27 篇原创文章 · 获赞 4 · 访问量 6275

猜你喜欢

转载自blog.csdn.net/studentenglish/article/details/100024106