vue组件中name属性有啥作用

这个name,和路由的那个name不一样哦:

![]()

作用1:

当使用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>

作用二:

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

![]()

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。