web-dev-qa-db-fra.com

Vue - Comment passer la référence parent à l'enfant comme accessoire?

J'essaie de passer la référence du composant actuel à un composant enfant comme ceci:

<template>
    <div class="screen" ref="screen">
        <child-component :screenRef="screenRef">
        </child-component>
    </div>
</template>


<script>
    const Parent = {
        name: 'parent',
        data: {
            screenRef: {}
        },
        mounted() {
            this.screenRef = this.$refs['screen']
        }
    }
</script>

Étant donné que les types Vue.js ne prennent pas en charge HTMLDivElement, j'obtiens une erreur dans le composant enfant lorsque je définis screenRef comme accessoire.

const ChildComponent = {
  name: 'child',
  props: {
    screen: {
      type: HTMLDivElement,
      default: {}
    }
  }
}

Quelqu'un pourrait-il indiquer la bonne façon de procéder?

javascriptvue.jsvuejs2
6
Tushar Arora

Essayez simplement d'accéder au parent depuis le composant enfant via:

this.$parent

ou

this.$el.parent

ou utilisez l'option inheritAttrs dans le composant enfant pour le passage non transparent des attributs du parent à l'enfant:

const ChildComponent = {
  inheritAttrs: true,
  name: 'child',
  props: {
    screen: {
      type: HTMLDivElement,
      default: {}
    }
  }
}
2
Andrii

Vous faites tout correctement. Ne déclarez tout simplement pas le type requis pour la propriété screen dans le composant enfant. Le props: {screen: {default: {}}} Suivant fera l'affaire.

Comme notes annexes:

  • Le crochet mounted est le bon endroit pour affecter les éléments $refs Aux éléments $data Comme ancien n'est pas défini à created hook.

  • Vue hastype: object Qui fonctionnerait toujours bien pour votre validation de type d'accessoire screen si vous souhaitez appliquer la validation du type d'accessoire.

  • Si, par hasard, vous souhaitez attribuer la valeur d'objet default autre que le {} Vide, vous devez l'affecter via la fonction (contrairement aux types de données non-objet):

    default: function () {
    return {a: 1, b: 2}
}
1
Valentine Shi

Si vous avez besoin de données provenant de différents composants, passez-les simplement avec des accessoires.

Ou si vous avez besoin de ces données dans plusieurs composants, essayez Vuex:

https://vuex.vuejs.org/guide/

1
Canor