我们在写 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:
- <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>
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 的作用小结, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/140702.htm