Digamos que ya tenemos una App montada, en main.js:
createApp(App).mount('#app');Y me gustaría escribir una función, que debería llamarse así:
createModal({ render: () => <SomeComponent />, }); Normalmente, cuando implementamos funciones como las anteriores, simplemente llamamos a la createApp(h(render)) y luego montamos su instancia en cualquier lugar que queramos.
Pero el problema es que cuando lo hicimos, la instancia modal no heredará nada de la aplicación raíz.
Entonces, si tenemos algo como provide('root', 'here') procesado en la aplicación raíz, y luego llamamos a inject('root') en la otra aplicación, no obtendremos el resultado de la cadena here .
En cambio, el resultado será undefined , porque estas dos aplicaciones no comparten el mismo contexto.
¿Qué debo hacer para hacer las cosas bien?
Esto es lo que podrías hacer:
const { createApp, reactive, toRefs, defineComponent, computed } = Vue; const state = reactive({ foo: 'bar' }) createApp({ setup() { const addDynamicApp = () => { const div = document.createElement('div'); document.querySelector('#app').appendChild(div); createApp({ setup: () => ({ ...toRefs(state) }), template: `<h3>Dynamic child (new App)</h3> <input v-model="foo">` }).mount(div); }; return { ...toRefs(state), addDynamicApp } } }).mount('#app') #app { border: 2px solid #f50; padding: 1rem; } <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script> <div id="app"> <input v-model="foo" /> <button @click="addDynamicApp">Add dynamic app</div> </div>Los principios subyacentes son:
...toRefs(state) , en ambos)<div> , incluso si ese div forma parte de otra aplicación.Puede tener tantas aplicaciones, compartiendo el mismo estado reactivo. Pueden estar completamente separados en DOM o anidados entre sí.