web-dev-qa-db-ja.com

Vue.js単一ファイルコンポーネント「名前」がコンシューマーで受け入れられない

構文をご容赦ください。私はvue.jsを初めて使用するため、用語が正しくない場合があります。

CreateTodo.vueという名前の単一ファイルコンポーネント（SFC）があります。 （nameプロパティで）「create-todo-item」という名前を付けました。 app.vueファイルにインポートすると、マークアップ<create-todo>を使用する場合にのみコンポーネントを使用できます。 <create-todo-item>を使用すると、コンポーネントがページに表示されません。

それ以来、app.vueにcomponents: { 'create-todo-item': CreateTodo }ではなくcomponents: { CreateTodo }の形式でコンポーネントをリストすることで、私がやりたいことを実行できることがわかりました。

私の質問はこれです：nameプロパティでコンポーネントに名前を付ける意味はありますか？コンシューマーではそれは尊重されていません。空のままにすると、アプリはエラーなしで実行されます。

また、vue-loaderがPascalCaseインポートステートメントに基づいてテンプレート用にkebab-case要素名を割り当てていると私は確信していますか？

悪い-コンポーネント名プロパティ

これは、SFCに名前を付けようとするコードです（CreateTodo.vue）。

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

コンポーネントにリストされている名前は、私のApp.vueによって無視されます。要素が<create-todo>ではなく<create-todo-item>であっても、htmlは正常にレンダリングされます。

<template>
  <div>
    <!--Render the TodoList component-->
    <!--TodoList becomes-->
    <todo-list v-bind:todos="todos"></todo-list>
    <create-todo v-on:make-todo="addTodo"></create-todo>
  </div>
</template>

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

  export default {
    name: 'app',
    components: {
      TodoList,
      CreateTodo,
    },
    // data function avails data to the template
    data() {
      return {
      };
    },
    methods: {
      addTodo(todo) {
        this.todos.Push({
          title: todo.title,
          project: todo.project,
          done: false,
        });
      },
    }
  };
</script>

良い-コンポーネント名プロパティをまったく使用しない

以下は、nameプロパティを使用しない私のCreateTodo.vueです。

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

そして、変更されたコンポーネントを使用した私のApp.vueは次のとおりです。

<template>
  <div>
    <!--Render the TodoList component-->
    <!--TodoList becomes-->
    <todo-list v-bind:todos="todos"></todo-list>
    <create-todo-item v-on:make-todo="addTodo"></create-todo-item>
  </div>
</template>

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

  export default {
    name: 'app',
    components: {
      TodoList,
      'create-todo-item': CreateTodo,
    },
    // data function avails data to the template
    data() {
      return {
      };
    },
    methods: {
      addTodo(todo) {
        this.todos.Push({
          title: todo.title,
          project: todo.project,
          done: false,
        });
      },
    }
  };
</script>
vue.jssingle-page-application
10
anu start

最初に、SFCモジュールの.nameプロパティは、デバッグの便宜にすぎないことに注意してください。 （これは再帰にも役立ちます。）それ以外は、コンポーネントを親コンポーネントにローカルに登録する場合は特に問題になりません。

具体的な詳細については、最初の例では、ES2015の省略表記を使用しています

components: {
    TodoList,
    CreateTodo,
},

に相当

components: {
  'TodoList': TodoList,
  'CreateTodo': CreateTodo
},

CreateTodoとしてインポートされるコンポーネントには、'CreateTodo'と同等の名前<create-todo>が付けられます。

2番目の例では、略記を省略して明示的に名前を付けます。

components: {
  TodoList,
  'create-todo-item': CreateTodo,
},

それは同等です、ところで

components: {
  TodoList,
  'CreateTodoItem': CreateTodo,
},

したがって、その場合は、コンポーネントに'CreateTodoItem'、または<create-todo-item>という名前を付けていることがわかります。

4
Stephen Thomas