Javascript Vue.js 未知自定义元素

Vue.js unknown custom element

提问by Juliver Galleto

I'm a beginner with Vue.js and I'm trying to create an app that caters my daily tasks and I ran into Vue Components. So below is what I've tried but unfortunately, it gives me this error:

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

vue.js:1023 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

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

Any ideas, help, please?

任何想法，请帮助？

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>

回答by GONG

You forgot about the componentssection in your Vue initialization. So Vue actually doesn't know about your component.

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

Change it to:

将其更改为：

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() {

 }

});

And here is jsBin, where all seems to works correctly: http://jsbin.com/lahawepube/edit?html,js,output

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

UPDATE

更新

Sometimes you want your components to be globally visible to other components.

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

In this case you need to register your components in this way, before your Vue initializationor export(in case if you want to register component from the other component)

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

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

After you can add your component inside your vue el:

在您可以将您的组件添加到您的vue el:

<example-component></example-component>

回答by umesh kadam

Just define Vue.component()before new vue().

Vue.component()之前定义new vue()。

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

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

update

更新

• HTML converts <anyTag>to <anytag>
• So don't use captital letters for component's name
• Instead of <myTag>use <my-tag>

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

Github issue : https://github.com/vuejs/vue/issues/2308

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

回答by Arthur Kuznetsov

Don't overuse Vue.component(), it registers components globally. You can create file, name it MyTask.vue, export there Vue object https://vuejs.org/v2/guide/single-file-components.htmland then import in your main file, and don't forget to register it:

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

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

回答by Wouter Schoofs

Be sure that you have added the component to the components.

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

For example:

例如：

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

回答by Martijn van der Bruggen

This solved it for me: I supplied a third argument being an object.

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

in app.js(working with laravel and webpack):

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

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

回答by Nathaniel Rink

I was following along the Vue documentation at https://vuejs.org/v2/guide/index.htmlwhen I ran into this issue.

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

Later they clarify the syntax:

后来他们澄清了语法：

So far, we've only registered components globally, using Vue.component:

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

Globally registered components can be used in the template of any rootVue instance (new Vue) created afterwards– and even inside all >subcomponents of that Vue instance's component tree.

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

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

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

(https://vuejs.org/v2/guide/components.html#Organizing-Components)

( https://vuejs.org/v2/guide/components.html#Organizing-Components)

So as Umesh Kadam says above, just make sure the global component definition comes before the var app = new Vue({})instantiation.

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

回答by Eduardo Paoli

This is a good way to create a component in 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'
});