我有这个 SocialNetworks.vue 组件

<template>
  <div class="socialNetworks">
    <SocialLink to="https://twitter.com/" icon="twitter.svg" name="twitter" />
    <SocialLink
      to="https://facebook.com/"
      icon="facebook.svg"
      name="facebook"
    />
    <SocialLink to="https://github.com/" icon="github.svg" name="github" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { SocialLink } from '@/components/atoms'
export default defineComponent({
  component: { SocialLink }
})
</script>

<style lang="scss" scoped>
.socialNetworks {
  display: grid;
  grid-gap: 1rem;
}
</style>

使用这个子 SocialLink.vue 组件

<template>
  <a class="socialLink" :href="to">
    <img src="@/assets/images/icons/search.svg" :alt="name" />
  </a>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    name: { Type: String, required: true },
    icon: { Type: String, required: true },
    to: { Type: String, required: true }
  },
  computed: {
    iconPath(): string {
      return require(`@/assets/images/icons/${this.icon}`)
    }
  }
})
</script>

<style lang="scss" scoped>
.socialLink {
  background-color: #ff895f;
  width: 47px;
  height: 47px;
  border-radius: 5rem;
  display: grid;
  justify-items: center;
  align-items: center;
  transition: transform 0.2s linear;
  &:hover {
    transform: scale(1.1);
  }
  img {
    width: 23px;
    height: 23px;
  }
}
</style>

我在此 SitePresentation.vue 中使用了 SocialNetworks.vue 组件

<template>
  <a class="socialLink" :href="to">
    <img src="@/assets/images/icons/search.svg" :alt="name" />
  </a>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    name: { Type: String, required: true },
    icon: { Type: String, required: true },
    to: { Type: String, required: true }
  },
  computed: {
    iconPath(): string {
      return require(`@/assets/images/icons/${this.icon}`)
    }
  }
})
</script>

<style lang="scss" scoped>
.socialLink {
  background-color: #ff895f;
  width: 47px;
  height: 47px;
  border-radius: 5rem;
  display: grid;
  justify-items: center;
  align-items: center;
  transition: transform 0.2s linear;
  &:hover {
    transform: scale(1.1);
  }
  img {
    width: 23px;
    height: 23px;
  }
}
</style>

我觉得一切都很好，但我一直在我的控制台中收到这个

[Vue warn]: Failed to resolve component: SocialLink
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <SocialNetworks> 
  at <SitePresentation> 
  at <SiteContainer class="homeTemplate" > 
  at <HomeTemplate> 
  at <App>

SitePresentation.vue 中的图像工作得很好，svg 没问题，导入的路径据我所知是正确的。我试着不调用 require，而是调用其中一个硬编码的 svg，就像我在演示组件中所做的那样。我认为问题可能出在 SocialLink.vue 组件中，但我不太确定到底是什么问题 我的代码中有什么奇怪的地方，或者我忽略了一些细节？

最佳答案

您的 component 属性应该是 components!

export default defineComponent({
  components: { SocialLink }
})

https://vuejs.org/api/options-misc.html#components

关于javascript - Vue 3 - "Failed to resolve component"带有子组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71879314/