Vue.js elemen kustom tidak diketahui

Saya seorang pemula dengan Vue.js dan saya mencoba membuat aplikasi yang melayani tugas harian saya dan saya menemukan Vue Components. Jadi di bawah ini adalah apa yang saya coba tetapi sayangnya, ini memberi saya kesalahan ini:

vue.js: 1023 [Vue warn]: Elemen kustom tidak diketahui: - apakah Anda mendaftarkan komponen dengan benar? Untuk komponen rekursif, pastikan untuk memberikan opsi "nama".

Ada ide, tolong, tolong?

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>

Anda lupa tentang componentsbagian di Vue initialization. Jadi Vue sebenarnya tidak tahu tentang komponen Anda.

Ubah menjadi:

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

 }

});

Dan inilah jsBin, di mana semuanya bekerja dengan benar: http://jsbin.com/lahawepube/edit?html,js,output

MEMPERBARUI

Terkadang Anda ingin komponen Anda terlihat secara global oleh komponen lain.

Dalam hal ini Anda perlu mendaftarkan komponen Anda dengan cara ini, sebelum Anda Vue initializationatau export(jika Anda ingin mendaftarkan komponen dari komponen lain)

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

Setelah Anda dapat menambahkan komponen Anda di dalam vue el:

<example-component></example-component>

Definisikan saja Vue.component()sebelumnya new vue().

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

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

memperbarui

• HTML diubah <anyTag> menjadi<anytag>
• Jadi jangan gunakan huruf captital untuk nama komponen
• Alih-alih <myTag>digunakan<my-tag>

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

Ini memecahkannya untuk saya: Saya memberikan argumen ketiga sebagai objek.

di app.js(bekerja dengan laravel dan webpack):

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

Jangan terlalu sering digunakan Vue.component(), ini mendaftarkan komponen secara global. Anda dapat membuat file, beri nama MyTask.vue, ekspor di sana objek Vue https://vuejs.org/v2/guide/single-file-components.html dan kemudian mengimpor file utama Anda, dan jangan lupa untuk mendaftarkannya :

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

Pastikan Anda telah menambahkan komponen ke komponen.

Sebagai contoh:

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

Ini adalah cara yang bagus untuk membuat komponen di 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'
});

Saya sedang mengikuti dokumentasi Vue di https://vuejs.org/v2/guide/index.html ketika saya mengalami masalah ini.

Kemudian mereka mengklarifikasi sintaks:

Sejauh ini, kami hanya mendaftarkan komponen secara global, menggunakan Vue.component:

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

Komponen yang terdaftar secara global dapat digunakan dalam template dari setiap instance root Vue (Vue baru) yang dibuat setelahnya - dan bahkan di dalam semua> subkomponen dari pohon komponen instance Vue tersebut.

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

Jadi seperti yang dikatakan Umesh Kadam di atas, pastikan saja definisi komponen global ada sebelum var app = new Vue({})instansiasi.

Saya mengalami kesalahan yang sama

[Vue warn]: Elemen khusus tidak diketahui: - apakah Anda mendaftarkan komponen dengan benar? Untuk komponen rekursif, pastikan untuk memberikan opsi "nama".

namun, saya benar-benar lupa menjalankan npm install && npm run devkompilasi file js.

mungkin ini membantu pemula seperti saya.

OK, kesalahan ini mungkin tampak jelas, tetapi suatu hari saya mencari jawaban HANYA UNTUK DITEMUKAN BAHWA SAYA TELAH 2 kali KOMPONEN menyatakan. Itu membuat saya gila karena VueJS tidak mengeluh sama sekali ketika Anda menyatakannya 2 kali, jelas saya memiliki banyak kode di antaranya, dan ketika saya menambahkan komponen baru, saya menempatkan deklarasi di atas, sementara saya juga punya satu dekat ke bawah. Jadi lain kali mencari yang pertama ini, menghemat banyak waktu