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?


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

Risposte:


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.


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


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


1

Se hai importato il codice tramite require

var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')
e inizializza l'istanza di dati come di seguito

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

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' }
                }
            }

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.