Vue 依赖注入与动态组件

1.依赖注入与动态组件

先定义子组件   Home.vue  Posts.vue   Achive.vue

 Home.vue

Posts.vue

 Achive.vue

然后定义父组件  Main.vue

Main.vue

//设置样式

最后更改main.js

import Main from './pages/dmyComponent/Main.vue'

createApp(Main).mount('#app')

结果

 2.设置全局变量

在其他目录下新建一个 Glob.vue

 

在Home.vue页面添加Glob.vue

最后更改main.js页面

import Main from './pages/dmyComponent/Main.vue'
import Glob from './Glob.vue' //此处为新建的Glob.vue页面的地址
//createApp(Main).mount('#app')
 const app =createApp(Main);
 //注册全局组件
  app.component("Glob",Glob);
  //挂载DOM树
  app.mount('#app')

运行结果