Vue 功能组件内导入组件

Question

我在

SpotifyButton

目录中有一个名为

components

的组件，如下所示：

<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 问题 以及一些解决方案。

我采用了第一个解决方案，所以我的

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/

Answer 3

如您所知，函数组件不支持

components

属性。有一些解决方法，下面的方法过去对我有用。

您可以使用

inject

来避免污染道具。

<template functional>
  <div>
    <component :is="injections.components.CoolComponent"></component>
  </div>
</template>

<script>
import CoolComponent from "./CoolComponent.vue";

export default {
  functional: true,
  inject: {
    components: {
      default: { CoolComponent }
    }
  }
};
</script>

或者，您可以使用 JSX。

import CoolComponent from "./CoolComponent.vue";

export default {
  functional: true,
  render (h) {
    return (
      <div>
        <CoolComponent></CoolComponent>
      </div>
    )
  }
};