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?

— 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

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