web-dev-qa-db-fra.com

Passage dynamique d'accessoires à un composant dynamique dans VueJS

J'ai une vue dynamique:

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

avec une instance associée Vue:

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

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

Dans mon cas, j'ai trois composants différents: myComponent, myComponent1 et myComponent2. Et je bascule entre eux comme ça:

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

Maintenant, j'aimerais passer les accessoires à myComponent1.

Comment puis-je transmettre ces accessoires lorsque je change le type de composant en myComponent1?

javascriptvue.jsvuejs2vue-component
58
Epitouille

Pour transmettre des objets de manière dynamique, vous pouvez ajouter la directive v-bind à votre composant dynamique et transmettre un objet contenant les noms et valeurs de vos objets:

Donc, votre composant dynamique ressemblerait à 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' }
    }
  }
}

Alors maintenant, quand la currentComponent est myComponent, elle aura une propriété foo égale à 'bar'. Et quand ce n'est pas le cas, aucune propriété ne sera transmise.

131
thanksd

Vous pouvez également faire sans propriété calculée et inline l'objet.

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

Présenté dans la documentation sur V-Bind - https://vuejs.org/v2/api/#v-bind

2
Jquestions

Si vous avez importé votre code via require

var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')
data: function () {
            return {
                currentView: patientDetailsEdit,
            }

vous pouvez également référencer le composant via la propriété name si votre composant l'a assigné

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