Vue.js 单文件组件的“name”属性失效？揭秘背后不为人知的秘密

vue.js

2024-03-03 15:18:37

Vue.js 单文件组件的“name”属性：一个不为人知的秘密

问题：为何“name”属性在使用中失效？

Vue.js 单文件组件的“name”属性旨在指定组件的名称，然而，在使用该组件时，该名称似乎并不被识别。这是什么原因造成的？

原因：Vue-loader 的行为

经过深入研究，我们发现这是由 Vue-loader 的行为造成的。Vue-loader 会自动为模板使用分配 kebab-case 元素名称，而这与组件中的 PascalCase 格式的“name”属性不符。

解决方法：

要解决这个问题，有两种方法：

在组件中不使用“name”属性： 这是一种简单的方法，只需在组件中删除“name”属性即可。
在消费者中手动指定组件名称： 在使用组件时，可以使用 kebab-case 格式指定名称，如下所示：

components: {
  'component-name': Component
}

代码示例：

方法 1：在组件中不使用“name”属性

// CreateTodo.vue
<script>
  export default {
    data() {
      return {
        titleText: '',
        projectText: '',
        isCreating: false,
      };
    },
  };
</script>

// App.vue
<template>
  <div>
    <create-todo-item v-on:make-todo="addTodo"></create-todo-item>
  </div>
</template>

<script>
  import CreateTodo from './components/CreateTodo.vue';

  export default {
    components: {
      'create-todo-item': CreateTodo,
    },
    // ...
  };
</script>

方法 2：在消费者中手动指定组件名称

// CreateTodo.vue
<script>
  export default {
    name: 'create-todo-item',
    data() {
      return {
        titleText: '',
        projectText: '',
        isCreating: false,
      };
    },
  };
</script>

// App.vue
<template>
  <div>
    <create-todo v-on:make-todo="addTodo"></create-todo>
  </div>
</template>

<script>
  import CreateTodo from './components/CreateTodo.vue';

  export default {
    components: {
      CreateTodo,
    },
    // ...
  };
</script>