Vue.js未知的自定义元素
Vue.js未知的自定义元素
提问于 2016-09-08 11:15:11
我是Vue.js的初学者，我正在尝试创建一个应用程序来满足我的日常任务，我遇到了Vue组件。下面是我尝试过的方法，但不幸的是，它给出了这个错误：
vue.js:1023 Vue警告:未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供"name“选项。
有什么想法吗，请帮帮忙？
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>
回答 12
Stack Overflow用户
回答已采纳
发布于 2016-09-08 12:12:29
您忘记了Vue initialization中的components部分。所以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>Stack Overflow用户
发布于 2017-04-19 18:21:17
只需在new vue()之前定义Vue.component()即可。
Vue.component('my-task',{
.......
});
new Vue({
.......
});更新
- HTML将
<anyTag>转换为<anytag> - ，因此请不要使用大写字母作为组件名称
- ，而不是使用
<myTag>使用HTML
Stack Overflow用户
发布于 2021-07-31 15:17:00
我只花了一个小时来写这条消息--通常很容易解决。
我得到这个错误是因为我忘了在主元件中关闭我的标记。
不幸的是，浏览器控制台&我的代码编辑器没有给出任何指示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39382032
复制相关文章
相似问题