vue组件中name属性有啥作用（命名组件）

这个name，和路由的那个name不一样哦：

vue命名路由（name）的作用

 

 

作用一：

　　当使用keep-alive时，可以使用这个name进行过滤

export default {
  name:'Home'
}，
mounted(){
  this.getInfo();
}，
methods:{
  getInfo(){
     axios.get('/xx/home.json',{
       params:{
        id:this.$route.params.id
       }
     }).then(this.getInfoSuccess)
   }
}

　　使用keep-alive后，第二次进入页面时不会触发mounted()函数，此时想要进行数据请求可以使用activated()函数，也可以利用这个name属性增加一个过滤器：

<div id="app"> 
  <keep-alive exclude="Home">
    <router-view/>
  </keep-alive>
</div>

　　

作用二：递归组件（组件自己调用自己）中迭代时需要调用自身的name

1、components/TreeMenu.vue

<template>
  <ul>
    <li v-for="(item,index) in menuData" :key="index">
      <p>{{item.name}}</p>
      <TreeMenu :menuData="item.children"></TreeMenu>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'TreeMenu',
  props: { menuData: Array }
}
</script>
<style>
ul {
  padding-left: 20px !important;
}
</style>

2、App.vue

<template>
  <div id="app">
    <TreeMenu :menuData='menuData' />
  </div>
</template>
<script>
import TreeMenu from '@/components/TreeMenu'
export default {
  data() {
    return {
      menuData: [
        {
          name: '菜单1',
          children: [
            {
              name: '菜单1-1',
              children: [{ name: '菜单1-1-1' }, { name: '菜单1-1-2' }]
            }
          ]
        },
        {
          name: '菜单2',
          children: [{ name: '菜单2-1' }]
        }
      ]
    }
  },
  components: { TreeMenu }
}
</script>

3、效果

　　

 

作用三：vue-tools调试时，如果使用设置了name属性，那么控制台里显示的是设置的名字，否则显示组件名