Vue 中 name 属性的作用

动态组件

<keep-alive> 组件通过 include 和 exclude 属性来控制哪些组件实例应该被缓存，而这里的判断依据就是组件的name属性。如果在使用 <keep-alive> 时指定了 include 属性，Vue.js 将会使用组件的 name 属性来匹配是否需要缓存该组件。

<template>
  <div>
    <keep-alive :include="['MyComponent']">
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      currentComponent: 'MyComponent'
    };
  }
};
</script>

在这个例子中，<keep-alive> 的 include 属性包含了一个字符串数组，其中的字符串是组件的 name 属性。这样就告诉 Vue.js 只缓存 name 为 'MyComponent'