写 vue 文件的时候,会给组件命名

  1. export default {
  2. name: 'xxx',
  3. data(){
  4. return {}
  5. }
  6. }

当项目使用 keep-alive 组件时,可搭配组件 name 进行缓存过滤。

  1. export default{
  2. name: 'Detail'
  3. mounted(){
  4. },
  5. methods:{
  6. getInfo(){
  7. axios.get('xx/detail.json',{
  8. params:{
  9. id: this.$route.params.id
  10. }
  11. }).then(this.getInfoSucc())
  12. }
  13. },

因为我们在 App.vue 中使用了 Keep-alive 导致我们第二次进入的时候页面不会重新请求,即不会触发 mounted 函数。有两种解决方法,一个是增加一个 activated() 函数,每次进入页面的时候再获取一次数据。
还有一个方案就是在 keep-alive 中增加一个过滤:

  1. <div id="app">
  2. <keep-alive exclude="Detali">
  3. <router-view />
  4. </keep-alive>
  5. </div>

DOM 做递归组件时

比如说 detail.vue 组件里 有一个 list.vue 组件,递归迭代时需要调用自身 name

  1. // list.vue
  2. <div>
  3. <div v-for="(item,index) of list" :key="index">
  4. <div>
  5. <span class="item-title-icon"></span>
  6. {{item.title}}
  7. </div>
  8. <div v-if="item.children" >
  9. <detail-list :list="item.children"></detail-list>
  10. </div>
  11. </div>
  12. </div>
  13. <script>
  14. export default {
  15. name:'DetailList',//递归组件是指组件自身调用自身
  16. props:{
  17. list:Array
  18. }
  19. }
  20. </script>
  1. // list 数据
  2. const list = [{
  3. "title": "A",
  4. "children": [{
  5. "title": "A-A",
  6. "children": [{
  7. "title": "A-A-A"
  8. }]
  9. },{
  10. "title": "A-B"
  11. }]
  12. }, {
  13. "title": "B"
  14. }, {
  15. "title": "C"
  16. }, {
  17. "title": "D"
  18. }]

image.png

在使用 vue-devtool 时

vue-devtool 调试工具里显示的组件名称时由 vue 中的组件 name 决定的image.png