Vue.js未知的自定义元素

Question

我是Vue.js的初学者,我正在尝试创建一个满足我日常任务的应用程序,而且我遇到了Vue Components.所以下面是我尝试但不幸的是,它给了我这个错误:

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>

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

UPDATE

有时,您希望组件对其他组件全局可见.

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

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

在以下内容中添加组件后vue el:

<example-component></example-component>

Answer 2

只是定义Vue.component()之前new vue().

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

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

更新

• HTML转换<anyTag> 为<anytag>
• 所以不要使用captital字母作为组件的名称
• 而不是<myTag>使用<my-tag>

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

Answer 3

我只花了 1 个小时来处理这条消息——通常很容易解决。

我收到此错误是因为我忘记关闭父组件中的 <script> 标记。

不幸的是，浏览器控制台和我的代码编辑器没有给出任何指示。