标签:Vue name alive vue 组件 exclude include
转自:https://www.cnblogs.com/jiaoshou/p/13415259.html
我们在写vue项目的时候都会给组件命名,这里的name非必选项。
export default { name:'xxx' }
**官方文档指出:name只有作为组件选项时起作用。 **
常见的几种用途
1.组件递归操作
vue允许组件模板调用自身,这在日常需求中也时有出现,此时我们就可以根据组件的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>
2.配合keep-alive对组件缓存做限制(include/exclude="name")
我们知道 keep-alive的 include和exclude 允许有条件的对组件进行缓存,其中include和exclude所匹配的就是组件的name值。
实例:
<!-- 把除了组件名是 Liantong,Dianxin 的组件缓存起来 --> <keep-alive exclude="Liantong,Dianxin"> <router-view></router-view> </keep-alive>
3、在dev-tools中使用
在开发中我们经常需要对代码进行调试,在dev-tools中组件是以组件name进行显示的,(如图一)这样更有语义化,方便我们快速定位到我们需要审查的位置,结构更清晰明了。
另外vue中name使用和vue-router中name使用没有直接联系,是两个概念。
标签:Vue,name,alive,vue,组件,exclude,include 来源: https://www.cnblogs.com/vickylinj/p/14408377.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。