我们在写vue项目的时候会遇到给组件命名
,这里的名字非必选项,看起来好像没啥用处,但是实际上这里用处还挺多的
出口默认{
名称:“xxx”
}
<强> 1。当项目使用点火电极时,可搭配组件的名字进行缓存过滤
,举个例子:
,我们有个组件命名为细节,其中dom加载完毕后我们在钩子函数安装中进行数据加载
出口默认{
名称:“细节”
},
安装(){
this.getInfo ();
},
方法:{
getInfo () {
axios.get (/xx/detail.json, {
参数:{
id: route.params.id美元
}
})(this.getInfoSucc)
}
}
因为我们在App.vue中使用了点火电极导致我们第二次进入的时候页面不会重新请求,即触发安装函数。
,有两个解决方案,一个增加激活()函数,每次进入新页面的时候再获取一次数据。
,还有个方案就是在点火电极中增加一个过滤,如下图所示:
& lt; div id=坝τ谩北?
& lt;维生排除=跋附凇北?
& lt; router-view/比;
& lt;/keep-alive>
& lt;/div>
<强> 2. dom做递归组件时
,比如说detail.vue组件里有个list.vue子组件,递归迭代时需要调用自身的名字
列表。vue:
& lt; div>
& lt; div)=傲斜硐?指数”:关键=爸甘北?
& lt; div>
& lt;跨类=" item-title-icon "祝辞& lt;/span>
{{item.title}}
& lt;/div>
& lt; div v="项目。孩子”比;
& lt;明细表:列表=" item.children "祝辞& lt;/detail-list>
& lt;/div>
& lt;/div>
& lt;/div>
& lt; script>
出口默认{
名称:' DetailList ',//递归组件是指组件自身调用自身
道具:{
数组列表:
}
}
& lt;/script>
列表数据:
常量列表=[{
“标题”:“一”,
“孩子”:[{
“标题”:“一”,
“孩子”:[{
“标题”:“一一一”
})
}，{
“标题”:“a - b”
})
},{
“标题”:“B”
},{
“标题”:“C”
},{
“标题”:“D”
}]
迭代的结果如下:
<强> 3。当你用vue-tools时
vue-devtools调试工具里显示的组见名称是由vue中组件名称决定的
以上所述是小编给大家介绍的vue组件名称的作用小结,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
