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屬性，那么控制台里顯示的是設置的名字，否則顯示組件名