Estoy trabajando con una aplicación Vue 3 muy simple, que se detalla a continuación.
Debido a la naturaleza de nuestro proyecto, queremos usar plantillas en DOM.
Esto funciona bien para un solo componente. Pero una vez que se agrega un componente secundario, este componente no funciona.
Vea el ejemplo a continuación, donde SubComponent deja de funcionar cuando habilitamos createApp para el componente App .
Intenté usar tragamonedas, experimenté con el registro como componentes, pero ninguno de estos funciona.
¿Qué estoy pasando por alto?
const {ref} = Vue; const SubComponent = { setup() { const text = ref(""); return { text }; } }; const App = { setup() { const count = ref(0); const inc = () => { count.value++; }; return { count, inc }; } } Vue.createApp(SubComponent).mount("#subcomponent"); Vue.createApp(App).mount('#app') <head> <script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script> </head> <body> <div id="app"> <h1>Hello Vue 3!</h1> <button @click="inc">Clicked {{ count }} times.</button> <div id="subcomponent"> <h2>Hello from subcomponent</h2> <input v-model="text" /> <br /> <span>{{text}}</span> </div> </div> </body>Tal vez como el siguiente fragmento:
const {ref} = Vue; const SubComponent = { template: ` <h2>Hello from subcomponent</h2> <input v-model="text" /> <br /> <span>{{text}}</span> `, setup() { const text = ref(""); return { text }; } }; const App = { setup() { const count = ref(0); const inc = () => { count.value++; }; return { count, inc }; } } Vue.createApp(App) .component('SubComponent', SubComponent) .mount('#app') <head> <script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script> </head> <body> <div id="app"> <h1>Hello Vue 3!</h1> <button @click="inc">Clicked {{ count }} times.</button> <sub-component></sub-component> </div> </body>No puede anidar varias aplicaciones vue, solo tiene una aplicación y dentro de ella puede tener componentes múltiples o anidados. Sin embargo, no estoy seguro de que el enfoque tenga todo en un solo archivo.
const {ref} = Vue; const SubComponent = { setup() { const text = ref(""); return { text }; } }; const App = { components: { SubComponent, }, setup() { const count = ref(0); const inc = () => { count.value++; }; return { count, inc }; } } Vue.createApp(App).mount('#app') <head> <script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script> </head> <body> <div id="app"> <h1>Hello Vue 3!</h1> <button @click="inc">Clicked {{ count }} times.</button> <sub-component> <h2>Hello from subcomponent</h2> <input v-model="text" /> <br /> <span>{{text}}</span> </sub-component> </div> </body>