功能组件中的Vue导入组件

nue99wik 于 2023-08-07 发布在 Vue.js

关注(0)|答案(3)|浏览(138)

我在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目录组件中不起作用？

vue.js

来源：https://stackoverflow.com/questions/63251839/vue-import-component-within-functional-component

3条答案

按热度按时间

0tdrvxhp1#

这是因为我使用了功能组件。事实证明，如果不做一些时髦的变通方法，就不能嵌套功能性组件。下面是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>

字符串

赞(0）回复(0）举报 2023-08-07

s2j5cfk02#

与以下内容一起使用：

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/

型

赞(0）回复(0）举报 2023-08-07

q8l4jmvw3#

如您所知，功能组件不支持components属性。有几个变通方法，下面的那些在过去为我工作。
可以**使用inject避免污染 prop **。

<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>
    )
  }
};

型

赞(0）回复(0）举报 2023-08-07

我来回答

功能组件中的Vue导入组件

3条答案

相关问题

热门标签

最新问答