vue.js入门（18）组件嵌套

养成一个习惯，components下的组件，首字母都大写，组件名是什么，class名，name名就是什么

这个时候写好User.vue文件

<template>
  <div class="user">
  	<ul>
  		<li v-for:"user in user">{{ user }}</li>
  	</ul>
  </div>
</template>

<script>
export default {
  name: 'user'
  data () {
    return {
     users:["day1","day2","day3"],
    }
  }
}
</script>

<style scoped>

</style>

但是这个时候页面是一片空白，因为App.vue文件并没有和User.vue文件关联上，关联上有两种方式

1.全局注册组件

在main.js里面加两句话

import User from './components/User'
Vue.component("user",User);

这样，任何一个文件都可以调用User这个组件了，只要调用user，就相当于调用User这个组件

然后回到App.vue文件，在第一部分template模板那里当成标签展示

<user></user>

这样就可以显示出来了，但是一般来说，基本上所有项目都不会采用全局注册这个方法，因为会导致所有都可以访问，一般采用的是第二种方法，局部注册组件

2.局部注册组件

把刚刚main.js加的两句话删掉，然后因为是想在App.vue中调用，所以直接在这个文件内引入就好

在行为逻辑第二个版块script版块中首先先引入

import User from './components/User'

然后，为了可以调用，在vue中注册组件

export default {
  name: 'App',
  components:{
  "user":User}
  }

这里有两种写法，可以写

"user":User

也可以直接写

User