javascript - Vue 无法识别我的组件，尽管它对我来说似乎很好。错误 - 未知的自定义元素 :

Question

正如标题所示，我收到错误 - vue.js:634 [Vue warn]: Unknown custom element: - 你是否正确注册了组件？

我猜这是一个愚蠢的错字，我查了一下，但找不到它。我认为根 Vue 实例很好，因为它按照应有的方式渲染和显示。这是我的根和组件代码:

new Vue({
el: "#root",
data: {
cats: [{name: "kalduna", spasobni: 0}, {name:"zaxarich", spasobni:1}, {name:"leqso", spasobni:0}],
newCat: "",
spasobniValue: null,
},
methods: {
addNewCat: function(){
this.cats.push({name: this.newCat, spasobni: parseInt(this.spasobniValue)
})
console.log(this.spasobniValue)
}
},
computed: {
kaldunify: function(){
if (this.newCat){
return this.newCat + " vis aswavli ubans she axvaro shena"

}
}
}
})
Vue.component('catsy', {
template: `
<p>Hello this is cat</p>
`
})

这是我的 HTML 部分，我尝试在其中显示它:

<div id="root">
<h1 v-for="cat in cats" :class="{fancyClass : cat.spasobni}">
{{cat.name }}
</h1>
<input  v-model="newCat" @keyup.enter="addNewCat" >
<br>
<label>Is he spasobni?<br>
<input type="radio" name="spasobni" v-model="spasobniValue" value="1">yass
<br>
<input type="radio" name="spasobni" v-model="spasobniValue" value="0">naay
</label> 

<br>
<button @click="addNewCat">
+ Add Cat
</button>

<catsy v-bind:cats="cats"/>
</div>

Answer 1

Vue.component()是一个全局注册方法。

These components are globally registered. That means they can be usedin the template of any root Vue instance (new Vue) created afterregistration.

来源:https://v2.vuejs.org/v2/guide/components-registration.html#Global-Registration

因此，您必须在new Vue()之前注册这些组件。

我更改了 Vue.component() 和 new Vue() 的顺序，并且还添加了一个本地注册的组件(ComponentA 和PascalCase；另请注意，我在 HTML 模板中添加了结束标记):

Vue.component('catsy', {
  props: ['cats'],
  template: `<p>Hello this is cat: <ul><li v-for="cat in cats">{{cat.name}}</li></ul></p>`
})

const ComponentA = {
  props: ['innerList'],
  template: `<div><strong>Other component</strong><catsy :cats="innerList"></catsy>After the inner list.</div>`
}

new Vue({
  el: "#root",
  components: {
    'component-a': ComponentA
  },
  data: {
    cats: [{
      name: "kalduna",
      spasobni: 0
    }, {
      name: "zaxarich",
      spasobni: 1
    }, {
      name: "leqso",
      spasobni: 0
    }],
    newCat: "",
    spasobniValue: null,
  },
  methods: {
    addNewCat: function() {
      this.cats.push({
        name: this.newCat,
        spasobni: parseInt(this.spasobniValue)
      })
      console.log(this.spasobniValue)
    }
  },
  computed: {
    kaldunify: function() {
      if (this.newCat) {
        return this.newCat + " vis aswavli ubans she axvaro shena"
      }
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<div id="root">
  <h1 v-for="cat in cats" :class="{fancyClass : cat.spasobni}">
    {{cat.name }}
  </h1>
  <input v-model="newCat" @keyup.enter="addNewCat">
  <br>
  <label>Is he spasobni?<br>
<input type="radio" name="spasobni" v-model="spasobniValue" value="1">yass
<br>
<input type="radio" name="spasobni" v-model="spasobniValue" value="0">naay
</label>
  <br>
  <button @click="addNewCat">+ Add Cat</button>
  <catsy v-bind:cats="cats"></catsy>
  <component-a :inner-list="cats"></component-a>
</div>

我还在 catsy 组件中添加了 prop。