Pasar props dinámicamente al componente dinámico en VueJS

Tengo una vista dinámica: 

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

Con una instancia de Vue asociada: 

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

Esto me permite cambiar mi componente dinámicamente.

En mi caso, tengo tres componentes diferentes: myComponent, myComponent1, y myComponent2. Y cambio entre ellos de esta manera:

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

Ahora, me gustaría pasar accesorios a myComponent1.

¿Cómo puedo pasar estas props cuando cambio el tipo de componente a myComponent1?

Author: thanksd, 2017-04-27
Source

2 answers

Para pasar props dinámicamente, puede agregar la directiva v-bind a su componente dinámico y pasar un objeto que contenga sus nombres y valores de prop:

Así que tu componente dinámico se vería así: 

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

Y en su instancia de Vue, currentProperties puede cambiar en función del componente actual: 

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

Así que ahora, cuando el currentComponent es myComponent, tendrá una propiedad foo igual a 'bar'. Y cuando no lo es, no se pasarán propiedades.

 57
Author: thanksd,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-27 13:18:14

Si has importado tu código a través de require

var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')
e inicie la instancia de datos como se muestra a continuación 

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

También puede hacer referencia al componente a través de la propiedad name si el componente r tiene asignado

currentProperties: function() {
                if (this.currentView.name === 'Personal-Details-Edit') {
                    return { mode: 'create' }
                }
            }
 0
Author: Mark Dowton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-13 04:38:14