Vue.js phần tử tùy chỉnh không xác định

Question 1

Tôi là người mới bắt đầu với Vue.js và tôi đang cố gắng tạo một ứng dụng phục vụ các công việc hàng ngày của mình và tôi đã gặp phải Vue Components. Vì vậy, dưới đây là những gì tôi đã thử nhưng thật không may, nó mang lại cho tôi lỗi này:

vue.js: 1023 [Vue warning]: Phần tử tùy chỉnh không xác định: - bạn đã đăng ký thành phần chính xác chưa? Đối với các thành phần đệ quy, hãy đảm bảo cung cấp tùy chọn "tên".

Bất kỳ ý tưởng, giúp đỡ, xin vui lòng?

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>

Mở rộng đoạn mã

Question 2

Bạn quên về componentsphần trong của bạn Vue initialization. Vì vậy, Vue thực sự không biết về thành phần của bạn.

Thay đổi nó thành:

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

 }

});

Và đây là jsBin, nơi tất cả dường như hoạt động chính xác: http://jsbin.com/lahawepube/edit?html,js,output

CẬP NHẬT

Đôi khi bạn muốn các thành phần của mình hiển thị trên toàn cầu đối với các thành phần khác.

Trong trường hợp này, bạn cần đăng ký các thành phần của mình theo cách này, trước Vue initializationhoặc export(trong trường hợp nếu bạn muốn đăng ký thành phần từ thành phần khác)

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

Sau khi bạn có thể thêm thành phần bên trong vue el:

<example-component></example-component>

Question 3

Chỉ cần xác định Vue.component()trước new vue().

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

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

cập nhật

HTML chuyển đổi <anyTag> thành<anytag>
Vì vậy, không sử dụng các chữ cái viết hoa cho tên của thành phần
Thay vì <myTag>sử dụng<my-tag>

Vấn đề trên Github: https://github.com/vuejs/vue/issues/2308

Question 4

Điều này đã giải quyết nó cho tôi: Tôi cung cấp đối số thứ ba là một đối tượng.

trong app.js(làm việc với laravel và webpack):

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

Question 5

Đừng lạm dụng Vue.component(), nó đăng ký các thành phần trên toàn cầu. Bạn có thể tạo tệp, đặt tên là MyTask.vue, xuất vào đó đối tượng Vue https://vuejs.org/v2/guide/single-file-components.html và sau đó nhập vào tệp chính của bạn và đừng quên đăng ký nó :

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

Question 6

Đảm bảo rằng bạn đã thêm thành phần vào các thành phần.

Ví dụ:

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

Question 7

Đây là một cách tốt để tạo một thành phần trong 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'
});

Question 8

Tôi đã theo dõi tài liệu Vue tại https://vuejs.org/v2/guide/index.html khi tôi gặp sự cố này.

Sau đó, họ làm rõ cú pháp:

Cho đến nay, chúng tôi chỉ đăng ký các thành phần trên toàn cầu, sử dụng Vue.component:
   Vue.component('my-component-name', {
       // ... options ...
   })
Các thành phần đã đăng ký toàn cầu có thể được sử dụng trong khuôn mẫu của bất kỳ cá thể Vue gốc nào (Vue mới) được tạo sau đó - và thậm chí bên trong tất cả> thành phần con của cây thành phần của thể hiện Vue đó.

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

Vì vậy, như Umesh Kadam đã nói ở trên, chỉ cần đảm bảo rằng định nghĩa thành phần toàn cục xuất hiện trước phần var app = new Vue({})khởi tạo.

Question 9

Tôi đã có cùng một lỗi

[Vue warning]: Phần tử tùy chỉnh không xác định: - bạn đã đăng ký thành phần chính xác chưa? Đối với các thành phần đệ quy, hãy đảm bảo cung cấp tùy chọn "tên".

tuy nhiên, tôi hoàn toàn quên chạy npm install && npm run devđể biên dịch các tệp js.

có lẽ điều này sẽ giúp những người mới như tôi.

Question 10

OK, lỗi này có vẻ rõ ràng, nhưng một ngày nọ, tôi đang tìm kiếm một câu trả lời CHỈ ĐỂ TÌM HIỂU RẰNG TÔI ĐÃ 2 lần khai báo LINH KIỆN . Điều đó khiến tôi phát điên vì VueJS không phàn nàn gì khi bạn khai báo nó 2 lần, rõ ràng là tôi có rất nhiều mã ở giữa và khi tôi thêm một thành phần mới, tôi đã đặt khai báo ở trên cùng, trong khi tôi cũng có một sát đáy. Vì vậy, lần sau hãy tìm kiếm điều này trước, tiết kiệm rất nhiều thời gian