One way to surpass this
, is to use the reserved <component>
element and use the same mount point to dynamically switch between multiple components, by using the is
attribute.
src/App.vue
:
<template> <div id="app"> <component is="hello"></component> <p> This is very useful... </p> </div> </template> <script> import Hello from './components/Hello' // Component Hello returns a template containing a "msg" property of data export default { components: { Hello } } </script>
The Hello.vue
file comes with the default files and folders of the project. Now we have exact same results we had before our changes, but here we are using the <component>
element. To see how this would work dynamically, check the next example where we are changing between two different single components by...