Vue.jsの不明なカスタム要素

Question 1

私はVue.jsの初心者で、日常のタスクに対応するアプリを作成しようとしていますが、Vueコンポーネントに遭遇しました。以下は私が試したものですが、残念ながら、このエラーが発生します。

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>

スニペットを展開

Question 2

の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>

Question 3

Vue.component()前に定義するだけnew vue()です。

Vue.component('my-task',{
     .......
});

new Vue({
    .......
});

更新

HTMLはに変換さ<anyTag> れます<anytag>
したがって、コンポーネントの名前に大文字を使用しないでください
<myTag>使用する代わりに<my-tag>

Githubの問題：https：//github.com/vuejs/vue/issues/2308

Question 4

これで解決しました。オブジェクトである3番目の引数を指定しました。

in app.js（laravelとwebpackでの作業）：

Vue.component('news-item', require('./components/NewsItem.vue'), {
    name: 'news-item'
});

Question 5

使いすぎないでくださいVue.component()。コンポーネントをグローバルに登録します。ファイルを作成し、MyTask.vueという名前を付け、そこにVueオブジェクトhttps://vuejs.org/v2/guide/single-file-components.html をエクスポートしてから、メインファイルにインポートし、登録することを忘れないでください。：

new Vue({
...
components: { myTask }
...
})

Question 6

コンポーネントをコンポーネントに追加したことを確認してください。

例えば：

export default {
data() {
    return {}
},
components: {
    'lead-status-modal': LeadStatusModal,
},
}

Question 7

これは、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'
});

Question 8

この問題が発生したとき、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({})インスタンス化の前に来ることを確認してください。

Question 9

私が持っていた同じエラーを

[Vue警告]：不明なカスタム要素：-コンポーネントを正しく登録しましたか？再帰コンポーネントの場合は、必ず「名前」オプションを指定してください。

しかし、私npm install && npm run devはjsファイルをコンパイルするために実行するのを完全に忘れました。

多分これは私のような初心者を助けます。

Question 10

OK、このエラーは明白に思えるかもしれませんが、ある日、コンポーネントが2回宣言したことを見つけるための答えを探していました。2回宣言してもVueJSはまったく文句を言わないので、それは私を苛立たせていました。明らかに、間にたくさんのコードがあり、新しいコンポーネントを追加したときに、宣言を一番上に配置しました。底に近い。次回はこれを最初に探して、多くの時間を節約します