Vue 3 - 带有子组件的“无法解析组件”

Question

我有这个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>

我正在使用SocialNetworks.vue这个组件SitePresentation.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 组件中，但我不太确定问题到底是什么我的代码中有一些奇怪的东西或者我忽略了一些细节？

Answer 1

你的component财产应该是components！

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

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