Vue.js未知的自定义元素 [英] Vue.js unknown custom element

问题描述

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

I'm a beginner with Vue.js and I'm trying to create an app that caters my daily tasks and I ran into Vue Components. So below is what I've tried but unfortunately, it gives me this error:

vue.js：1023 [Vue警告]：未知自定义元素： - 你是否
正确注册组件？对于递归组件，请确保
提供名称选项。

vue.js:1023 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

任何想法，帮助，请？

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实际上不了解您的组件。

You forgot about the components section in your Vue initialization. So Vue actually doesn't know about your component.

将其更改为：

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

And here is jsBin, where all seems to works correctly: http://jsbin.com/lahawepube/edit?html,js,output

更新

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

Sometimes you want your components to be globally visible to other components.

在这种情况下，您需要在 Vue初始化或 export （如果你想从其他组件注册组件）

In this case you need to register your components in this way, before your Vue initialization or export (in case if you want to register component from the other component)

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

您可以在<$ c中添加组件$ c> vue el ：

<example-component></example-component>

这篇关于Vue.js未知的自定义元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！