Vue.js之组件嵌套的小demo项目
第一步：初始化一个wabpack项目，这里不在复述。
第二步：在components文件夹下新建Header.vue Footer.vue和Users.vue三个组件文件
Header.vue文件：
1 <!--1模板：html结构 --> 2 <template> 3 ??<header> 4 ????<h1>{{title}}</h1> 5 ??</header> 6 </template> 7 ?8 <!--2行为：处理逻辑 --> 9 <script>10 ??export default {11 ????name: ‘app-header‘,12 ????data () {13 ??????return {14 ????????title:"Vue.js Demo"15 ??????}16 ????}17 ??}18 </script>19 20 <!--3样式：解决样式 -->21 <style scoped>22 header{23 ??background: pink;24 ??padding: 10px;25 }26 h1{27 ??color: #222;28 ??text-align: center;29 ??}30 </style>Users.vue文件：
1 <template> 2 ??<div class="users"> 3 ????<ul> 4 ??????<li v-for="user in users" 5 ??????????@click="user.show = !user.show"> 6 ????????<h2 >{{user.name}}</h2> 7 ????????<h3 v-show="user.show">{{user.Position}}</h3> 8 ??????</li> 9 ????</ul>10 ??</div>11 </template>12 13 <script>14 ??export default {15 ????name: ‘users‘,16 ????data () {17 ??????return {18 ????????users:[19 ??????????{name:"Henry",Position:"Java工程师",show:false},20 ??????????{name:"Lily",Position:"Java工程师",show:false},21 ??????????{name:"KangKang",Position:"Java工程师",show:false},22 ??????????{name:"Maria",Position:"Java工程师",show:false},23 ??????????{name:"Sally",Position:"Java工程师",show:false},24 ??????????{name:"Elinna",Position:"Java工程师",show:false}25 ??????????]26 ??????}27 ????}28 ??}29 </script>30 31 <style scoped>32 users{33 ??width: 100%;34 ??max-width: 1200px;35 ??margin:40px auto;36 ??padding: 0 20px;37 ??box-sizing: border-box;38 }39 ul{40 ???display: flex; ??????????//所有li在一行41 ??flex-wrap: wrap; ?????????//所有li在容器里，不会超出容器42 ??list-style-type: none;43 ??padding: 0; ??????????????//去掉浏览器自带的padding值44 ??}45 li{46 ??flex-grow: 1; ???????????//如果一行之有一个会撑满整行，如果有两个，两个撑满整行47 ??flex-basis: 200px; ??????//每一个li200px的宽度48 ??text-align: center;49 ??padding: 30px;50 ??border: 1px solid #666;51 ??margin: 10px;52 }53 </style>Footer.vue文件：
1 <template> 2 ??<footer> 3 ????<p>{{copyright}}</p> 4 ??</footer> 5 </template> 6 ?7 ?8 <script> 9 ??export default {10 ????data () {11 ??????return {12 ????????copyright:"Copyright 2018 Vue Demo"13 14 ??????}15 ????}16 ??}17 </script>18 19 <style scoped>20 ??footer{21 ????background: #666;22 ????padding: 6px;23 ??}24 ??footer p{25 ????color: pink;26 ????text-align: center;27 ??}28 </style>第三步：编写App.vue文件：在此文件中要在script中通过import引用刚才编写的三个组件，然后通过组件的别名使用组件。
App.vue文件：项目入口文件中引入的组件
1 <!--模板--> 2 <template> 3 ??<div id="app"> 4 ????<app-header></app-header> 5 ????<users></users> 6 ????<app-footer></app-footer> 7 ??</div> 8 </template> 9 10 <!--行为-->11 <script>12 ??//局部注册组件13 ??import Users from ‘./components/Users‘14 ??import Header from ‘./components/Header‘15 ??import Footer from ‘./components/Footer‘16 17 export default {18 ??name: ‘App‘,19 ??components:{20 ????"users":Users,21 ????"app-header":Header,22 ????"app-footer":Footer23 ??}24 }25 </script>26 27 <!--样式-->28 <style >29 </style>html文件：项目的入口文件
1 <!DOCTYPE html> 2 <html> 3 ??<head> 4 ????<meta charset="utf-8"> 5 ????<meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 ????<title>vue-playlist</title> 7 ??</head> 8 ??<body> 9 ????<div id="app"></div>10 ??</body>11 </html>
main.js文件：项目的入口js文件
1 import Vue from ‘vue‘2 import App from ‘./App‘3 4 Vue.config.productionTip = false5 new Vue({6 ??el: ‘#app‘,7 ??components: { App },8 ??template: ‘<App/>‘9 })然后启动项目，就能看到生成一个组件嵌套形成的小demo
项目加载流程：
index.html是入口文件，加载html时候会调用main.js文件，main.js文件会实例化vue组件App.vue，然后App.vue会把其他组件也加载进来，最后渲染整个页面。
Vue.js之组件嵌套小demo
原文地址：https://www.cnblogs.com/jin-zhe/p/8317452.html