在project目录下创建components文件夹,然后将所有子组件放入components文件夹下 【创建此目录】【文件名的首字母大写】
1、多组件嵌套使用
Child1.vue
<template>
<div>子组件1</div>
</template>
<script>
// export default {
// }
</script>
<style>
</style>
Child2.vue
<template>
<div>子组件2</div>
</template>
<script>
// export default {
// }
</script>
<style>
</style>
App.vue
<template>
<div>
单文件组件
<!-- 调用子组件 -->
<Child1></Child1>
<Child2></Child2>
</div>
</template>
<script>
//导入components目录下的子文件 Child1为指定的组件名,可以任意命名,不一定按照文件名
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'
export default {
// 将子组件添加到App.vue中
components:{
Child1,
Child2,
}
}
</script>
<style>
</style>
2、多组件路由使用
使用路由形式将多个单文件组件组合在一起
-
定义路由目录和路由文件 【直接在可视化界面新建即可】【在根目录下创建文件夹router,在此目录下创建文件router.js】
mkdir router touch router.js
-
编写路由文件router.js
-
import Vue from 'vue' // 导入路由插件 import Router from 'vue-router' import Child1 from '../components/Child1.vue' import Child2 from '../components/Child2.vue' // 在vue中使用插件 Vue.use(Router) export default new Router({ // 定义匹配规则 routes:[ { path:'/', // 匹配根路径/,加载Chiled1中的内容 component:Child1 }, { path:'/child2', component:Child2 } ] })
-
-
-
在main.js中使用路由
-
import Vue from 'vue' import App from './App.vue' //导入定义好的路由 import router from './router/router.js' new Vue({ el:'#app', router, //使用路由 render:function(creater){ return creater(App) } })
-
-
在App.vue中指定路由标签
-
<template> <div> 单文件组件 <!-- 记载路由标签 --> <router-view></router-view> </div> </template> <script> </script> <style> </style>
-