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

<强>更新

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

在这种情况下，您需要在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>
因此，请勿使用信用卡作为组件的名称
而不是<myTag>使用<my-tag>

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

Answer 3

当我遇到这个问题时，我正在关注https://vuejs.org/v2/guide/index.html的Vue文档。

后来他们澄清了语法：

到目前为止，我们只使用Vue.component：
在全球注册了组件
   Vue.component('my-component-name', {
       // ... options ...
   })
全球注册的组件可以在任何根的模板中使用 之后创建的Vue实例（新Vue） - 甚至在该Vue实例的组件树的所有＆gt;子组件内。

（https://vuejs.org/v2/guide/components.html#Organizing-Components）

正如Umesh Kadam上面所说，只需确保全局组件定义在var app = new Vue({})实例化之前。

Answer 4

这是在vue中创建组件的好方法。

>>> s
'64 bytes from 10.11.1.5: icmp_seq=2 ttl=128 time=215 ms'
>>> p=re.compile(r"(?:[0-9]+\.){3}")
>>> p.findall(s)
['10.11.1.']
>>> p=re.compile(r"([0-9]+\.){3}")
>>> p.findall(s)
['1.']

Answer 5

确保已将组件添加到组件中。

例如：

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

Answer 6

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

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

Vue.component('news-item', require('./components/NewsItem.vue'), {
    name: 'news-item'
});

Answer 7

不要过度使用Vue.component()，它会全局注册组件。您可以创建文件，将其命名为MyTask.vue，然后将其中的Vue对象导出 https://vuejs.org/v2/guide/single-file-components.html 然后导入您的主文件，别忘了注册它：

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

Answer 8

我遇到了相同错误

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

但是，我完全忘记运行npm install && npm run dev来编译js文件。

也许这可以帮助像我这样的新手。

Answer 9

好的，这个错误似乎很明显，但是有一天我一直在寻找答案，只是发现 2次声明。两次声明时，VueJS根本不抱怨，这让我发疯了，很明显，我在两者之间有很多代码，当我添加一个新组件时，我将声明放在顶部，而我也有一个接近底部。所以下次要先找这个，节省很多时间

Answer 10

Vue 在这方面肯定有一些错误。我发现虽然像这样注册一个组件

components: { MyComponent }

大部分时间都可以工作，并且可以自动用作 MyComponent 或 my-component，有时您必须这样拼写

components: { 'my-component' : MyComponent }

并严格将其用作我的组件

Answer 11

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

我收到此错误是因为我忘记关闭父组件中的

Vue.js未知的自定义元素

11 个答案: