Requisiten dynamisch an dynamische Komponenten in VueJS übergeben

103

Ich habe eine dynamische Ansicht: 

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

mit einer zugeordneten Vue-Instanz:

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

Dadurch kann ich meine Komponente dynamisch ändern.

In meinem Fall, ich habe drei verschiedene Komponenten: myComponent, myComponent1, und myComponent2. Und ich wechsle zwischen ihnen so:

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

Jetzt möchte ich Requisiten weitergeben myComponent1.

Wie kann ich diese Requisiten übergeben, wenn ich den Komponententyp in ändere myComponent1?

javascript vue.js vuejs2 vue-component Epitouille
quelle
Sie übergeben Requisiten über Attribute für das Element propName="propValue". Ist das deine Frage?
Danke
Ich kann nicht, weil ich nie schreibe, <myComponent1 propName="propValue">ich ändere die Komponente programmgesteuert mit$parent.currentComponent = componentName
Epitouille
Ja, aber du schreibst <div :is="currentComponent"></div>. Dort würden Sie das Attribut hinzufügen.
Danke
Ja, aber Requisiten hängen von der Komponente ab. myComponent1Nehmen Sie zum Beispiel Requisiten und myComponent2nehmen Sie keine Requisiten
Epitouille

Antworten:

211

Um Requisiten dynamisch zu übergeben, können Sie die v-bindAnweisung zu Ihrer dynamischen Komponente hinzufügen und ein Objekt übergeben, das Ihre Requisitennamen und -werte enthält:

Ihre dynamische Komponente würde also folgendermaßen aussehen:

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

Und in Ihrer Vue-Instanz currentPropertieskann sich basierend auf der aktuellen Komponente Folgendes ändern:

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

Wenn also das currentComponentist myComponent, hat es eine fooEigenschaft gleich 'bar'. Wenn dies nicht der Fall ist, werden keine Eigenschaften übergeben.

danke: D
quelle
Warum funktioniert das bei mir nicht? Es funktioniert für die erste Komponente, aber nachdem ich die "currentComponent" geändert habe, erhalte ich eine "e.currentProperties", die für die untergeordnete Komponente undefiniert ist.
Ricardo Vigatti
2
@ RicardoVigatti, ohne irgendetwas von Ihrem Code zu sehen, ist es ziemlich schwer zu wissen
danke
Hey, wenn ich etwas hinzufügen möchte <component>(here)</component>. Ist das möglich?
Felipe Morales
1
@FelipeMorales, yep, Sie müssen nur einen Standard <slot>für jede Komponente definieren, die Sie dynamisch rendern. vuejs.org/v2/guide/components-slots.html
danke
1
Der Styleguide besagt, dass Requisitennamen so detailliert wie möglich sein sollten. Dieser Weg verstößt gegen die Regel. Dies ist auch, was ich benutze, aber ich suche nach einer besseren Lösung.
Koray Küpe
8

Sie können auch auf berechnete Eigenschaften verzichten und das Objekt inline.

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

Wird in den Dokumenten zu V-Bind angezeigt - https://vuejs.org/v2/api/#v-bind

Fragen
quelle
2

Sie könnten es bauen wie ...

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"/>
Erweitern Sie das Snippet

Kornél Takó
quelle
1

Wenn Sie Ihren Code importiert haben, benötigen Sie

var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')
Erweitern Sie das Snippet
und initialisieren Sie die Dateninstanz wie folgt

data: function () {
            return {
                currentView: patientDetailsEdit,
            }
Erweitern Sie das Snippet

Sie können die Komponente auch über die Eigenschaft name referenzieren, wenn Ihre Komponente zugewiesen ist

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

Mark Dowton
quelle