0
votes

Composant d'importation Vue dans le composant fonctionnel

J'ai un composant appelé SpotifyButton dans le répertoire des components qui ressemble à ceci:

<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>

Je peux importer et utiliser ceci dans un composant dans le répertoire des pages comme ça sans aucun problème:

<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>

Cependant, si j'essaie d'importer SpotifyButton dans un autre composant du répertoire des components de la même manière, j'obtiens l'erreur suivante .

Voici le composant ArtistPreview , qui se trouve dans le répertoire des 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>

Est-ce que je manque quelque chose? Pourquoi une importation qui fonctionne parfaitement dans un composant de répertoire de pages ne fonctionne pas dans un components répertoire de composants?

vue.js nuxt.js

1 commentaires

hmm la seule chose que je vois est le <template functional> peut-être supprimer le functional ?

3 Réponses :

0
votes

Aller avec:

<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/

Avec Typescript, il vaut mieux utiliser une autre approche: ajoutez 'nuxt-property-decorator' et suivez son flux.

Donc, vous définissez votre composant comme suit:

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

2 commentaires

J'obtiens le même comportement après avoir essayé cela. Quelle pourrait être la cause à votre avis?

Ne rencontrez jamais votre problème, avez-vous déjà essayé de supprimer fonctionnel de <template>. Quelle est la version Vue?

0
votes

Vous devez simplement l'essayer comme

components: {
    "spotify-button":SpotifyButton
  }

0 commentaires

0
votes

Cela se produisait parce que j'utilise des composants fonctionnels. Il s'avère que vous ne pouvez pas imbriquer des composants fonctionnels sans faire des solutions de contournement géniales. Voici le problème de GitHub avec quelques solutions.

J'ai ArtistPreview la première solution, donc mon composant ArtistPreview ressemble maintenant à ceci:

<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 commentaires