javascript - style - Pasar apoyos dinámicamente al componente dinámico en VueJS

vue props default

Question

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 así:

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

Ahora, me gustaría pasar accesorios a myComponent1 .

¿Cómo puedo pasar estos accesorios cuando cambio el tipo de componente a myComponent1 ?

Answer 1

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

Entonces su componente dinámico se vería así:

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

Y en su instancia de Vue, currentProperties puede cambiar según el componente actual:

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

Entonces, ahora, cuando currentComponent es myComponent , tendrá una propiedad foo igual a ''bar'' . Y cuando no es así, no se pasarán propiedades.

Answer 2

Si ha importado su código a través de require

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

e inicializar la instancia de datos de la siguiente manera

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

También puede hacer referencia al componente a través de la propiedad de nombre si su componente lo tiene asignado

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

Answer 3

También puede prescindir de la propiedad calculada e insertar el objeto en línea.

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

Se muestra en los documentos sobre V-Bind: https://vuejs.org/v2/api/#v-bind