Unbekanntes benutzerdefiniertes Element von Vue.j.

Ich bin ein Anfänger mit Vue.js und versuche, eine App zu erstellen, die meine täglichen Aufgaben erfüllt, und ich bin auf Vue Components gestoßen. Also unten ist, was ich versucht habe, aber leider gibt es mir diesen Fehler:

vue.js: 1023 [Vue warn]: Unbekanntes benutzerdefiniertes Element: - Haben Sie die Komponente korrekt registriert? Stellen Sie für rekursive Komponenten sicher, dass Sie die Option "Name" angeben.

Irgendwelche Ideen, bitte helfen?

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>

Sie haben den componentsAbschnitt in Ihrem vergessen Vue initialization. Vue weiß also eigentlich nichts über Ihre Komponente.

Ändern Sie es in:

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

 }

});

Und hier ist jsBin, wo alles richtig zu funktionieren scheint: http://jsbin.com/lahawepube/edit?html,js,output

AKTUALISIEREN

Manchmal möchten Sie, dass Ihre Komponenten für andere Komponenten global sichtbar sind.

In diesem Fall müssen Sie Ihre Komponenten auf diese Weise registrieren, bevor Sie Vue initializationoder export(falls Sie eine Komponente von der anderen Komponente registrieren möchten)

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

Nachdem Sie Ihre Komponente in Ihr vue el:

<example-component></example-component>

Einfach Vue.component()vorher definieren new vue().

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

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

aktualisieren

• HTML konvertiert <anyTag> nach<anytag>
• Verwenden Sie daher keine Großbuchstaben für den Namen der Komponente
• Anstelle von <myTag>Gebrauch<my-tag>

Github-Problem: https://github.com/vuejs/vue/issues/2308

Dies löste es für mich: Ich lieferte ein drittes Argument als Objekt.

in app.js(Arbeiten mit Laravel und Webpack):

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

Nicht überbeanspruchen Vue.component(), es werden Komponenten global registriert. Sie können eine Datei erstellen, sie MyTask.vue nennen, dort das Vue-Objekt https://vuejs.org/v2/guide/single-file-components.html exportieren und dann in Ihre Hauptdatei importieren. Vergessen Sie nicht, sie zu registrieren ::

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

Stellen Sie sicher, dass Sie die Komponente zu den Komponenten hinzugefügt haben.

Beispielsweise:

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

Dies ist eine gute Möglichkeit, eine Komponente in vue zu erstellen.

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'
});

Ich habe die Vue-Dokumentation unter https://vuejs.org/v2/guide/index.html verfolgt, als ich auf dieses Problem gestoßen bin.

Später klären sie die Syntax:

Bisher haben wir nur Komponenten weltweit mit Vue.component registriert:

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

Weltweit registrierte Komponenten können in der Vorlage eines Wurzel verwendet werden Vue - Instanz (neue Vue) erstellt danach - und sogar in alle> Subkomponenten dass Vue Instanz Komponentenbaum.

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

Wie Umesh Kadam oben sagt, stellen Sie einfach sicher, dass die globale Komponentendefinition vor der var app = new Vue({})Instanziierung erfolgt.