Vue.js 未知的自定义元素

Question

我是 Vue.js 的初学者，我正在尝试创建一个满足我日常任务的应用程序，但我遇到了 Vue 组件。所以下面是我尝试过的，但不幸的是，它给了我这个错误：

vue.js:1023 [Vue 警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

有什么想法，请帮忙？

 new Vue({
  el : '#app',
  data : {
    tasks : [
      { name : "task 1", completed : false},
      { name : "task 2", completed : false},
      { name : "task 3", completed : true}
    ]
  },
  methods : {

  },
  computed : {

  },
  ready : function(){

  }

});

Vue.component('my-task',{
  template : '#task-template',
  data : function(){
    return this.tasks
  },
  props : ['task']
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div id="app">
  <div v-for="task in tasks">
      <my-task :task="task"></my-task>
  </div>

</div>

<template id="task-template">
  <h1>My tasks</h1>
  <div class="">{{ task.name }}</div>
</template>

原文由 Juliver Galleto 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您忘记了 components Vue initialization 。所以 Vue 实际上并不知道你的组件。

将其更改为：

 var myTask = Vue.component('my-task', {
 template: '#task-template',
 data: function() {
  return this.tasks; //Notice: in components data should return an object. For example "return { someProp: 1 }"
 },
 props: ['task']
});

new Vue({
 el: '#app',
 data: {
  tasks: [{
    name: "task 1",
    completed: false
   },
   {
    name: "task 2",
    completed: false
   },
   {
    name: "task 3",
    completed: true
   }
  ]
 },
 components: {
  myTask: myTask
 },
 methods: {

 },
 computed: {

 },
 ready: function() {

 }

});

这里是 jsBin，似乎一切正常： http ://jsbin.com/lahawepube/edit?html,js,output

更新

有时您希望您的组件对其他组件全局可见。

在这种情况下，您需要以这种方式注册您的组件，在您的 Vue initialization 或 export 之前（如果您想从其他组件注册组件）

 Vue.component('exampleComponent', require('./components/ExampleComponent.vue')); //component name should be in camel-case

在您可以在 vue el 中添加组件之后：

 <example-component></example-component>

原文由 GONG 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只需在 Vue.component() new vue() 。

 Vue.component('my-task',{
     .......
});

new Vue({
    .......
});

更新

• HTML 将 <anyTag> 转换为 <anytag>
• 所以不要在组件名称中使用大写字母
• 而不是 <myTag> 使用 <my-tag>

Github 问题： https ://github.com/vuejs/vue/issues/2308

原文由 umesh kadam 发布，翻译遵循 CC BY-SA 3.0 许可协议