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 ?
Para pasar accesorios dinámicamente, puede agregar la directiva v-bind a su componente dinámico y pasar un objeto que contenga los nombres y valores de sus accesorios:
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' } } } } Así que ahora, cuando el componente myComponent currentComponent tendrá una propiedad foo igual a 'bar' . Y cuando no lo es, no se pasará ninguna propiedad.
También puede prescindir de la propiedad calculada y alinear el objeto.
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
Se muestra en los documentos en V-Bind - https://vuejs.org/v2/api/#v-bind
Podrías construirlo como...
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"/>