Vue 无法识别我的组件，即使它对我来说似乎很好。错误 - 未知的自定义元素：<componentName>

Posted 2023-02-23

【中文标题】Vue 无法识别我的组件，即使它对我来说似乎很好。错误 - 未知的自定义元素：<componentName>

【英文标题】：Vue can't recognize my component even though it seems fine to me. Error - Unknown custom element: <componentName>

【发布时间】：2020-03-22 04:55:40

【问题描述】：

正如标题所说，我收到错误 - 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>

【问题讨论】：

您必须在某处引用<componentName> 组件。尝试在 Codesandbox 上重现该问题并发布链接。

【参考方案1】：

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

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

来源：https://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。