Passer des props dynamiquement à un composant dynamique dans VueJS

Question

J'ai une vue dynamique :

<div id="myview">
  <div :is="currentComponent"></div>
</div>

avec une instance Vue associée :

new Vue ({
  data: function () {
    return {
      currentComponent: 'myComponent',
    }
  },
}).$mount('#myview');

Cela me permet de modifier mon composant de manière dynamique.

Dans mon cas, j'ai trois composants différents : myComponent , myComponent1 y myComponent2 . Et je passe de l'un à l'autre comme ça :

Vue.component('myComponent', {
  template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>"
}

Maintenant, j'aimerais passer des props à myComponent1 .

Comment puis-je passer ces props lorsque je change le type de composant en myComponent1 ?

Answer 1

Pour passer les props de manière dynamique, vous pouvez ajouter l'option v-bind à votre composant dynamique et passez-lui un objet contenant les noms et les valeurs de vos prop :

Votre composant dynamique ressemblerait donc à ceci :

<component :is="currentComponent" v-bind="currentProperties"></component>

Et dans votre instance Vue, currentProperties peut changer en fonction du composant actuel :

data: function () {
  return {
    currentComponent: 'myComponent',
  }
},
computed: {
  currentProperties: function() {
    if (this.currentComponent === 'myComponent') {
      return { foo: 'bar' }
    }
  }
}   

Donc maintenant, quand le currentComponent est myComponent il aura un foo égal à 'bar' . Et quand ce ne sera pas le cas, aucune propriété ne sera transmise.

Answer 2

Vous pouvez également vous passer de la propriété calculée et mettre l'objet en ligne.

<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

Montré dans les docs sur V-Bind - https://vuejs.org/v2/api/#v-bind

Answer 3

Vous pourriez le construire comme...

comp: { component: 'ComponentName', props: { square: true, outlined: true, dense: true }, model: 'form.bar' }

<component :is="comp.component" v-bind="{...comp.props}" v-model="comp.model"/>

Answer 4

Si vous avez importé votre code via require

var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')

et initalisez l'instance de données comme ci-dessous

data: function () {
            return {
                currentView: patientDetailsEdit,
            }

vous pouvez également faire référence au composant par le biais de la propriété "name" si votre composant en est doté.

currentProperties: function() {
                if (this.currentView.name === 'Personal-Details-Edit') {
                    return { mode: 'create' }
                }
            }

Answer 5

J'ai le même problème, résolu par ce qui suit :

<component :is="currentComponent" v-bind="resetProps"> 
   {{ title }}
</component>

et la script est

export default { 
  …
  props:['title'],
  data() {
    return {
      currentComponent: 'component-name',
    }
  },
  computed: {
    resetProps() {
      return { ...this.$attrs };
    },
}

<div
    :color="'error'"
    :onClick="handleOnclick"
    :title="'Title'"
/>

Je viens de reactjs et j'ai trouvé cette solution à mon problème.