Vue.js 알 수없는 맞춤 요소

Vue.js 알 수없는 맞춤 요소

---

저는 Vue.js의 초보자이고 일상적인 작업을 처리하는 앱을 만들려고 노력 중이며 Vue 구성 요소를 만났습니다. 그래서 아래는 내가 시도한 것이지만 불행히도이 오류를 제공합니다.

vue.js : 1023 [Vue warn] : 알 수없는 사용자 지정 요소 :-구성 요소를 올바르게 등록 했습니까? 재귀 구성 요소의 경우 "이름"옵션을 제공해야합니다.

어떤 아이디어라도 도와주세요.

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>

---

.NET의 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

---

남용하지 마십시오 Vue.component(). 구성 요소를 전역 적으로 등록합니다. 파일을 만들고 이름을 MyTask.vue로 지정하고 Vue 개체 https://vuejs.org/v2/guide/single-file-components.html 을 내 보낸 다음 주 파일에서 가져오고 등록하는 것을 잊지 마십시오. :

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

---

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

---

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

For example:

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

---

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

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

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

---

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

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 root Vue instance (new Vue) created afterwards – and even inside all >subcomponents of that Vue instance’s component tree.

(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.

참고URL : https://stackoverflow.com/questions/39382032/vue-js-unknown-custom-element