องค์ประกอบแบบกำหนดเองที่ไม่รู้จัก Vue.js

ฉันเป็นมือใหม่กับ Vue.js และฉันกำลังพยายามสร้างแอปที่ให้ความสำคัญกับงานประจำวันของฉันและฉันพบกับ Vue Components ด้านล่างนี้คือสิ่งที่ฉันได้ลอง แต่น่าเสียดายที่ทำให้ฉันมีข้อผิดพลาดนี้:

vue.js: 1023 [Vue warn]: Unknown element: - คุณลงทะเบียนคอมโพเนนต์ถูกต้องหรือไม่? สำหรับส่วนประกอบแบบวนซ้ำตรวจสอบให้แน่ใจว่าได้ระบุตัวเลือก "ชื่อ"

ความคิดใด ๆ โปรดช่วย?

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>

คุณลืมเกี่ยวกับ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>

เพียงกำหนดVue.component()ก่อนnew vue().

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

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

อัพเดต

• HTML แปลง<anyTag> ไป<anytag>
• ดังนั้นอย่าใช้ตัวอักษรคำอธิบายภาพสำหรับชื่อส่วนประกอบ
• แทนที่จะ<myTag>ใช้<my-tag>

ปัญหา Github: https://github.com/vuejs/vue/issues/2308

สิ่งนี้แก้ไขได้สำหรับฉัน: ฉันให้อาร์กิวเมนต์ที่สามเป็นวัตถุ

ในapp.js(ทำงานกับ laravel และ webpack):

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

อย่าใช้มากเกินไปVue.component()โดยจะลงทะเบียนส่วนประกอบทั่วโลก คุณสามารถสร้างไฟล์ตั้งชื่อว่า MyTask.vue ส่งออกวัตถุ Vue https://vuejs.org/v2/guide/single-file-components.html จากนั้นนำเข้าในไฟล์หลักของคุณและอย่าลืมลงทะเบียน :

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

ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มส่วนประกอบลงในส่วนประกอบแล้ว

ตัวอย่างเช่น:

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

นี่เป็นวิธีที่ดีในการสร้างส่วนประกอบใน 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'
});

ฉันติดตามเอกสาร Vue ที่https://vuejs.org/v2/guide/index.htmlเมื่อพบปัญหานี้

ต่อมาพวกเขาชี้แจงไวยากรณ์:

จนถึงตอนนี้เราได้ลงทะเบียนเฉพาะส่วนประกอบทั่วโลกโดยใช้ Vue.component:

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

คอมโพเนนต์ที่ ลงทะเบียนทั่วโลกสามารถใช้ในเทมเพลตของอินสแตนซ์ Vue รูท(Vue ใหม่) ที่สร้างขึ้นในภายหลัง - และแม้กระทั่งภายในคอมโพเนนต์ย่อยทั้งหมดของโครงสร้างส่วนประกอบของอินสแตนซ์ Vue นั้น

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

ดังที่ Umesh Kadam กล่าวไว้ข้างต้นเพียงตรวจสอบให้แน่ใจว่าคำจำกัดความขององค์ประกอบส่วนกลางมาก่อนการvar app = new Vue({})สร้างอินสแตนซ์

ฉันมีข้อผิดพลาดเดียวกัน

[Vue เตือน]: องค์ประกอบที่กำหนดเองที่ไม่รู้จัก: - คุณลงทะเบียนส่วนประกอบถูกต้องหรือไม่ สำหรับส่วนประกอบแบบวนซ้ำตรวจสอบให้แน่ใจว่าได้ระบุตัวเลือก "ชื่อ"

อย่างไรก็ตามฉันลืมที่จะเรียกใช้npm install && npm run devเพื่อรวบรวมไฟล์ js โดยสิ้นเชิง

อาจจะช่วยมือใหม่อย่างฉัน

ตกลงข้อผิดพลาดนี้อาจดูเหมือนชัดเจน แต่วันหนึ่งฉันกำลังมองหาคำตอบเพียงแค่พบว่าฉันมีการประกาศส่วนประกอบ 2 ครั้ง มันทำให้ฉันบ้าคลั่งเพราะ VueJS ไม่บ่นเลยเมื่อคุณประกาศ 2 ครั้งเห็นได้ชัดว่าฉันมีรหัสอยู่มากมายระหว่างนั้นและเมื่อฉันเพิ่มส่วนประกอบใหม่ฉันก็วางการประกาศไว้ที่ด้านบนในขณะที่ฉันก็มีด้วย ใกล้กับด้านล่าง คราวหน้าให้มองหาสิ่งนี้ก่อนจะช่วยประหยัดเวลาได้มาก