Passaggio dinamico di oggetti di scena al componente dinamico in VueJS

105

Ho una vista dinamica:

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

con un'istanza Vue associata:

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

Questo mi permette di cambiare dinamicamente il mio componente.

Nel mio caso, ho tre diverse componenti: myComponent, myComponent1, e myComponent2. E li cambio in questo modo:

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

Ora, vorrei passare gli oggetti di scena a myComponent1.

Come posso passare questi oggetti di scena quando cambio il tipo di componente in myComponent1?

— Epitouille
fonte

Passi oggetti di scena tramite attributi sull'elemento propName="propValue". È questa la tua domanda?

— grazie

Non posso perché non scrivo mai <myComponent1 propName="propValue">cambio il componente a livello di programmazione con$parent.currentComponent = componentName

— Epitouille

Sì ma scrivi tu <div :is="currentComponent"></div>. È lì che aggiungi l'attributo.

— grazie

Sì, ma gli oggetti di scena dipendono dal componente. Ad esempio, myComponent1prendi oggetti di scena e myComponent2non prendi oggetti di scena

— Epitouille

213

Per passare dinamicamente gli oggetti di scena, puoi aggiungere la v-binddirettiva al tuo componente dinamico e passare un oggetto contenente i tuoi nomi e valori di oggetti di scena :

Quindi il tuo componente dinamico sarebbe simile a questo:

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

E nella tua istanza Vue, currentPropertiespuò cambiare in base al componente corrente:

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

Quindi ora, quando currentComponentè myComponent, avrà una fooproprietà uguale a 'bar'. E quando non lo è, nessuna proprietà verrà passata.

— grazie: D
fonte

Perché questo non funziona per me? Funziona per il primo componente, ma dopo aver cambiato "currentComponent" ottengo un "e.currentProperties" non definito sul componente figlio.

— Ricardo Vigatti

2

@RicardoVigatti, senza vedere il tuo codice, è piuttosto difficile saperlo

— grazie

Ehi, se voglio aggiungere qualcosa <component>(here)</component>. È possibile?

— Felipe Morales

1

@FelipeMorales, sì, avresti solo bisogno di definire un valore predefinito <slot>per ogni componente che stai rendendo dinamicamente. vuejs.org/v2/guide/components-slots.html

— grazie

1

La guida allo stile dice che i nomi degli oggetti di scena dovrebbero essere il più dettagliati possibile. In questo modo infrange la regola. Questo è anche quello che uso, ma cerco una soluzione migliore.

— Koray Küpe

8

Puoi anche fare a meno della proprietà calcolata e incorporare l'oggetto.

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

Mostrato nei documenti su V-Bind - https://vuejs.org/v2/api/#v-bind

— Jquestions
fonte

2

Potresti costruirlo come ...

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"/>

Espandi lo snippet

— Kornél Takó
fonte

1

Se hai importato il codice tramite require

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

Espandi lo snippet

e inizializza l'istanza di dati come di seguito

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

Espandi lo snippet

puoi anche fare riferimento al componente tramite la proprietà name se il tuo componente lo ha assegnato

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

Espandi lo snippet

— Mark Dowton
fonte