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属性,那么控制台里显示的是设置的名字,否则显示组件名
作用四:
使用Vue.use()注册组件,将来该组件使用时就可以这样写
<ElButton>按钮</ElButton>
这两种写法都可以生效
<el-button>按钮</el-button> <ElButton>按钮</ElButton>