저는 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
답변
이것은 나를 위해 그것을 해결했습니다. 나는 세 번째 인수를 객체로 제공했습니다.
에서 app.js(laravel와 웹팩 작업) :
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'
});
답변
이 문제가 발생했을 때 https://vuejs.org/v2/guide/index.html 에서 Vue 문서를 따라 갔습니다.
나중에 그들은 구문을 명확히합니다.
지금까지 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({})인스턴스화 전에 전역 구성 요소 정의가 있는지 확인하십시오 .
