Javascript Vue.js未知自定义元素

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

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

有什么想法吗，请帮忙

newvue({
el:“#应用程序”，
数据：{
任务：[
{name:“任务1”，已完成：false}，
{name:“任务2”，已完成：false}，
{name:“任务3”，已完成：true}
]
},
方法：{
},
计算：{
},
就绪：函数（）{
}
});
Vue.component（‘我的任务’{
模板：“#任务模板”，
数据：函数（）{
返回此任务
},
道具：[“任务”]
});

我的任务
{{task.name}
您忘记了
Vue初始化中的
组件部分。所以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，这里的一切似乎都正常工作：

更新

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

在这种情况下，您需要在
Vue初始化
或
导出
之前以这种方式注册组件（如果您想从其他组件注册组件）

在
vue el
中添加组件后：

<example-component></example-component>

只需在
新建Vue（）之前定义
Vue.component（）

更新


HTML转换
遇到此问题时，我一直在关注Vue文档

后来他们澄清了语法：

到目前为止，我们仅使用Vue.component在全球注册了组件：

   Vue.component('my-component-name', {
       // ... options ...
   })

全局注册的组件可以在任何根目录的模板中使用
之后创建的Vue实例（新Vue）——甚至在该Vue实例组件树的所有>子组件中

（）

因此，正如上面Umesh Kadam所说，只需确保全局组件定义在
var app=new Vue（{}）
实例化之前出现。
这是在Vue中创建组件的好方法

let template = `<ul>
  <li>Your data here</li>
</ul>`;

Vue.component('my-task', {
  template: template,
  data() {

  },
  props: {
    task: {
      type: String
    }
  },
  methods: {

  },
  computed: {

  },
  ready() {

  }
});

new Vue({
 el : '#app'
});

let template=`

你的数据在这里
`；
Vue.component（‘我的任务’{
模板：模板，
数据（）{
},
道具：{
任务：{
类型：字符串
}
},
方法：{
},
计算：{
},
就绪（）{
}
});
新Vue({
el:“#应用程序”
});
确保已将组件添加到组件中

例如：

export default {
data() {
    return {}
},
components: {
    'lead-status-modal': LeadStatusModal,
},
}

这为我解决了这个问题：我提供了作为对象的第三个参数

在
app.js
中（使用laravel和webpack）：

不要过度使用
Vue.component（）
，它会全局注册组件。您可以创建文件，将其命名为MyTask.vue，并在其中导出vue对象
然后导入主文件，不要忘记注册它：

new Vue({
...
components: { myTask }
...
})

我犯了同样的错误

[Vue warn]：未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“name”选项

但是，我完全忘记了运行
npm安装和&npm-run-dev
来编译js文件

也许这对像我这样的新手有帮助。
好吧，这个错误似乎很明显，但有一天我在寻找答案，结果发现我声明了2次组件。这让我抓狂，因为当你声明它2次时，VueJS一点也不抱怨，很明显我有很多代码在中间，当我添加一个新组件时，我将声明放在顶部，而我也有一个接近底部。因此，下一次首先查找这个，可以节省大量时间
Vue肯定有一些错误。我发现尽管注册了这样一个组件

components: { MyComponent }

大部分时间都可以使用，并且可以自动用作MyComponent或my component，有时您必须将其拼写出来

components: { 'my-component' : MyComponent }

并严格地将其用作我的组件
，因此如果我有许多组件，那么我应该将其绑定到组件数组上？@CodeDemon。如果您将使用
ES6
，例如
组件：{myTask}，
或者如果它是一些小组件，您可以在
组件
属性中创建它，则可以将其缩短。但这似乎不是一个好方法，因为应用程序规模太大。你知道我为什么会有这个Vue警告吗：Vue.js:1023[Vue warn]：数据函数应该返回一个对象。（在组件：）中找到？您需要在组件：
data:function（）{return{property1:1，property2:2}}中这样编写它
对于我的情况，我将组件错误地拼写为组件。因此，我得到了这个错误。这应该是问题的主要答案。我可以从中确认，并尝试将Vue.component放在根目录之前（或
newvue（{}）
）。
Vue.component('exampleComponent', require('./components/ExampleComponent.vue')); //component name should be in camel-case

components: { MyComponent }

components: { 'my-component' : MyComponent }