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

问题描述

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

<块引用>

vue.js:1023 [Vue 警告]:未知的自定义元素:-你有吗?正确注册组件?对于递归组件，请确保提供名称"选项.

有什么想法、帮助吗?

new Vue({el : '#app',数据 : {任务 : [{名称:任务1"，已完成:假}，{名称:任务2"，已完成:假}，{名称:任务3"，已完成:真}]},方法 : {},计算:{},准备好:函数(){}});Vue.component('我的任务',{模板 : '#task-template',数据:函数(){返回 this.tasks},道具:['任务']});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></脚本><div id="应用程序"><div v-for="任务中的任务"><我的任务:任务=任务"></我的任务>

<模板 id="任务模板"><h1>我的任务</h1><div class="">{{ task.name }}</div></template>

解决方案

您忘记了 Vue 初始化 中的 components 部分.所以 Vue 实际上并不知道你的组件.

改为:

var myTask = Vue.component('my-task', {模板:'#任务模板'，数据:函数(){返回 this.tasks;//注意:在组件中数据应该返回一个对象.例如返回 { someProp: 1 }"},道具:['任务']});新的 Vue({el: '#app',数据: {任务: [{名称:任务1"，完成:假},{名称:任务2"，完成:假},{名称:任务3"，完成:真实}]},成分: {我的任务:我的任务},方法: {},计算:{},准备好:函数(){}});

这里是 jsBin，这里似乎一切正常:http://jsbin.com/lahawepube/edit?html,js,output

更新

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

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

Vue.component('exampleComponent', require('./components/ExampleComponent.vue'));//组件名称应该是驼峰式的

在你的 vue el 中添加你的组件之后:

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 warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Any ideas, help, please?

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>

解决方案

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

Change it to:

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() {

 }

});

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

UPDATE

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

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

After you can add your component inside your vue el:

<example-component></example-component>

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