功能组件内的vue导入组件

Question

我在components 目录中有一个名为SpotifyButton 的组件，如下所示：

<template functional>
  <b-button pill size="sm" :href="props.spotifyUri" class="spotify-green">
    <b-img-lazy
      src="~/assets/Spotify_Icon_RGB_White.png"
      height="20"
      width="20"
    />
    View on Spotify
  </b-button>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'SpotifyButton',
  props: {
    spotifyUri: {
      type: String,
      required: true
    }
  }
});
</script>

我可以毫无问题地在pages 目录中的组件中导入和使用它：

<template>
    <spotify-button :spotify-uri="artist.uri"/>
</template>

<script lang="ts">
import Vue from 'vue';
import { Context } from '@nuxt/types';
import FullArtist from '@/types/FullArtist';
import SpotifyButton from '@/components/SpotifyButton.vue';

export default Vue.extend({
  name: 'ArtistPage',
  components: {
    SpotifyButton
  },
  async asyncData({ $axios, params, error }: Context) {
    try {
      const artist: FullArtist = await $axios.$get(`/api/artists/${params.id}`);
      return { artist };
    } catch (e) {
      error({ statusCode: 404, message: 'Artist not found' });
    }
  },
  data() {
    return {
      artist: {
        name: ''
      } as FullArtist
    };
  }
});
</script>

但是，如果我尝试以同样的方式将SpotifyButton 导入到components 目录中的另一个组件中，则会收到以下错误。

这里是ArtistPreview组件，在components目录下：

<template functional>
  <spotify-button :spotify-uri="props.artist.uri"/>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import SpotifyButton from '@/components/SpotifyButton.vue';
import SimpleArtist from '@/types/SimpleArtist';

export default Vue.extend({
  name: 'ArtistPreview',
  components: {
    SpotifyButton
  },
  props: {
    artist: {
      type: Object as PropType<SimpleArtist>,
      required: true
    }
  }
});
</script>

我错过了什么吗？为什么在 pages 目录组件中运行良好的导入在 components 目录组件中不起作用？

Answer 1

发生这种情况是因为我正在使用功能组件。事实证明，如果不做一些时髦的变通办法，你就不能嵌套功能组件。这是GitHub issue 的一些解决方案。

我选择了第一个解决方案，所以我的 ArtistPreview 组件现在看起来像这样：

<template functional>
  <spotify-button :spotify-uri="props.artist.uri"/>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import SpotifyButton from '@/components/SpotifyButton.vue';
import SimpleArtist from '@/types/SimpleArtist';

Vue.component("spotify-button", SpotifyButton);

export default Vue.extend({
  name: 'ArtistPreview',
  props: {
    artist: {
      type: Object as PropType<SimpleArtist>,
      required: true
    }
  }
});
</script>

Answer 2

去：

import SpotifyButton from '~/components/SpotifyButton.vue'

使用 Typescript 最好使用另一种方法：添加 'nuxt-property-decorator' 并遵循他的流程。

所以，你定义你的组件如下：

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

import SpotifyButton from '~/components/SpotifyButton.vue'

@Component({
  components: {
    SpotifyButton
  },
})
class AnotherComponent extends Vue {
  ...
}
export default AnotherComponent
</script>

[Nuxt Property Decorator on Github][1]

I think is important to read the official [Nuxt Typescript documentation][2] to a proper setup.

I hope it helps!


  [1]: https://github.com/nuxt-community/nuxt-property-decorator
  [2]: https://typescript.nuxtjs.org/