今天的这篇文章一个知识点：在使用脚手架创建的Vue项目中，嵌套不同的组件。
一、基础知识简介：
脚手架各组件执行顺序：
-
Vue项目中有index.html文件，当我们启动一个项目的时候，打开的就是这个文件。index.html文件和main.js相关联，所以紧接着就是解析main.js中的内容。
-
main.js文件是Vue的入口文件，在这里我们可以引入Vue的其他组件，例如有Vue中的vue-router组件、vue-resource组件和App根组件。但是我们自己编写的组件为局部组件，一般情况下是不会在main.js文件中引入的。
-
App根组件一个很常用的功能是引入我们编写的组件，即我们编写的组件可以嵌套在App根组件中，这样我们自己编写的组件就可以添加到项目中。
二、组件之间的嵌套
分为全局组件和局部组件，全局组件在任何组件都可以使用，一般情况使用局部组件
首先创建子组件User.vue
<template>
<div class="users">
<h1>Users.vue</h1>
<ul>
<li v-for="(user,index) in users" :key="index">
<!-- 脚手架每次编译调用eslint检测出现bug，循环需要指定key值，且唯一 -->
{{ user }}
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
users:['小猪佩奇','大象爱美丽','小羊苏溪']
}
}
}
</script>
<style>
h1 {
color: green
}
</style>
- 全局组件的嵌套，在main.js中操作，1）引入组件，2）注册组件，3）调用组件
import Vue from 'vue'
import App from './App.vue'
//注册全局组件
//1.引入组件
import Users from './components/Users'
// 2.注册全局组件
Vue.component('users', Users)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
<h1>App.vue</h1>
<!-- 3.调用组件 -->
<Users></Users>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
//1.局部调用组件
import Users from './components/Users'
export default {
name: 'app',
//2.注册组件
components: {
// HelloWorld
Users: Users //相当于Users 可使用双引号“Mr-chaix”，推荐官方写法Users
}
}
</script>
<style>
h1 {
color: purple
}
</style>
- 局部组件的嵌套，在父组件App.vue中引用：
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
<h1>App.vue</h1>
<!-- 3.调用组件 -->
<Users></Users>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
//1.局部调用组件
import Users from './components/Users'
export default {
name: 'app',
//2.注册组件
components: {
// HelloWorld
Users: Users //相当于Users 可使用双引号“Mr-chaix”，推荐官方写法Users
}
}
</script>
<style>
h1 {
color: purple
}
</style>
