Javascript Vue可以'；我不认识我的部件，即使它对我来说很好。错误-未知的自定义元素：<；组件名称>；

正如标题所说，我得到了错误-vue.js:634[vue warn]：未知自定义元素：-您正确注册了组件吗？

我猜这是一个愚蠢的打字错误，我看了看，但找不到。 我认为根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>
`
})

newvue({
el:“根”，
数据：{
猫：[{名字：“卡尔杜纳”，斯帕索巴尼：0}，{名字：“扎克萨里奇”，斯帕索巴尼：1}，{名字：“莱克索”，斯帕索巴尼：0}]，
新猫：“，
spasobniValue:null，
},
方法：{
addNewCat:function（）{
this.cats.push（{name:this.newCat，spasobni:parseInt（this.spasobniValue））
})
console.log（this.spasobniValue）
}
},
计算：{
kaldunify:function（）{
if（this.newCat）{
返回此。newCat+“vis aswavli ubans she axvaro shena”
}
}
}
})
Vue.组件（“catsy”{
模板：`
你好，我是猫

`
})

这是我的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>

{{cat.name}


他是斯帕索布尼吗？

亚斯


纳伊


+加猫

Vue.component（）是一种全局注册方法

这些组件是全球注册的。这意味着它们可以被使用 在之后创建的任何根Vue实例（新Vue）的模板中 注册

资料来源：

因此，您必须在

新Vue（）之前注册这些组件

我更改了
Vue.component（）
和
new Vue（）
的顺序，还添加了一个本地注册的组件（ComponentA，使用PascalCase；还要注意，我在HTML模板中添加了结束标记）：


Vue.component（'catsy'{
道具：[猫]，
模板：`你好，这是猫：
{{cat.name}
`
})
常量分量A={
道具：['innerList']，
模板：`内部列表后的其他组件`
}
新Vue({
el:“根”，
组成部分：{
“组件a”：组件a
},
数据：{
猫：[{
姓名：“卡尔杜纳”，
斯帕索布尼：0
}, {
姓名：“zaxarich”，
斯帕索布尼：1
}, {
名称：“leqso”，
斯帕索布尼：0
}],
新猫：“，
spasobniValue:null，
},
方法：{
addNewCat:function（）{
这个，猫，推({
姓名：this.newCat，
spasobni:parseInt（this.spasobniValue）
})
console.log（this.spasobniValue）
}
},
计算：{
kaldunify:function（）{
if（this.newCat）{
返回此。newCat+“vis aswavli ubans she axvaro shena”
}
}
}
})

{{cat.name}


他是斯帕索布尼吗？

亚斯


纳伊


+加猫
您必须在某处有对
组件的引用。尝试在Codesandbox上重现该问题并发布链接。