Vue js未知的自定义元素

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (853)

我是Vue JS的初学者,我正在尝试创建一个满足我日常任务的应用程序,并且遇到了Vue Components。所以下面是我尝试过但不幸的是它给了我这个错误:

vue.js:1023 [Vue警告]:未知的自定义元素: - 您是否正确注册了组件?对于递归组件,请确保提供“名称”选项。

有什么想法,请帮忙吗?

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>
 
提问于
用户回答回答于

你忘记了Vue初始化中的组件部分。 所以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

UPDATE

有时,您希望组件对其他组件全局可见。

在这种情况下,您需要在Vue initialization之前以这种方式注册您的组件export(如果您想从其他组件注册组件)

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

在以下内容中添加组件vue el后:

<example-component></example-component>
用户回答回答于

当我遇到这个问题时,我正在关注https://vuejs.org/v2/guide/index.html上的vue文档。

后来他们澄清了语法:

到目前为止,我们只使用Vue.component在全局注册组件: Vue.component('my-component-name', { // ... options ... }) 全局注册的组件可以 在之后创建的任何根Vue实例(新Vue)的模板中使用 - 甚至可以在该Vue实例的组件树的所有>子组件内使用。

正如上面的umesh kadam所说,只需确保全局组件定义在var app = new Vue({})实例化之前出现。

扫码关注云+社区

领取腾讯云代金券