时间:2021-05-26
我们在写vue项目的时候会遇到给组件命名
这里的name非必选项,看起来好像没啥用处,但是实际上这里用处还挺多的
export default { name:'xxx'}1.当项目使用keep-alive时,可搭配组件name进行缓存过滤
举个例子:
我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加载
export default { name:'Detail'},mounted(){ this.getInfo();},methods:{ getInfo(){ axios.get('/xx/detail.json',{ params:{ id:this.$route.params.id } }).then(this.getInfoSucc) } }因为我们在App.vue中使用了keep-alive导致我们第二次进入的时候页面不会重新请求,即触发mounted函数。
有两个解决方案,一个增加activated()函数,每次进入新页面的时候再获取一次数据。
还有个方案就是在keep-alive中增加一个过滤,如下图所示:
<div id="app"> <keep-alive exclude="Detail"> <router-view/> </keep-alive> </div>2.DOM做递归组件时
比如说detail.vue组件里有个list.vue子组件,递归迭代时需要调用自身name
list.vue:
list数据:
const list = [{ "title": "A", "children": [{ "title": "A-A", "children": [{ "title": "A-A-A" }] },{ "title": "A-B" }] }, { "title": "B" }, { "title": "C" }, { "title": "D" }]迭代的结果如下:
3.当你用vue-tools时
vue-devtools调试工具里显示的组见名称是由vue中组件name决定的
总结
以上所述是小编给大家介绍的vue组件name的作用小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
创建组件的两种方法小结1.全局注册2.局部注册varchild=Vue.extend({})varparent=Vue.extend({})Vue.extend
首先,需要知道的是,每个组件有每个组件自己的作用域。每个组件都是Vue()的实例,有自己的作用域。比如现在有个组件这样的:Vue.component('fath
在父组件App.vue中引用子组件A.vue,把name的值传给A组件。1、安装在桌面新建一个文件夹$cd到文件中$npminstall-gvue-cli$vu
实践加深对vue的理解和运用有效途径,本文是基于vue的可搜索下拉框定制组件实现,在此记录.一、效果二、组件代码dropdown.vue{{item.name}
首先来看下vue的slot的实现组件,具名插槽name定义以及默认插槽提供内容渲染的组件HeremightbeapagetitleAparagraphforth