Vue 组件嵌套

一.自建子组件

1. App.vue是根组件，HelloWorld.vue是子组件。

2. 现在我们自己在components文件夹下建立一个新的子组件Users.vue，循环遍历users数组。此时你打开浏览器并不能看到任何东西。因为现在的Users.vue子组件，与App.vue根组件没有任何关系。

3. index.html是入口文件，到main.js当中展示的是App.vue的东西，那么我们要怎样才能展示Users.vue的东西？有两种方法

二.如何展示子组件的内容

• 方法一：注册全局组件

1. 调用Vue.component()方法
2. Vue.component("users",Users)，命名为“users”，Users为对应组件。
3. 为让别人能够识别调用此组件，就需要引入。import Users from './components/Users'。
4. 当有人调用了users这个组件标签之后，就可以调用Users整个子组件。有了这个全局组件后，就可以在任何地方调用这个组件。

5. 如何调用：来到App.vue当中，在html结构中调用这个users标签，即可实现，打开端口。

• 方法二：局部注册组件

1. 在App.vue文件中，将Users组件按路径引入
2. 再注册组件，应用components属性。签名的users是给组件取得名字，后面的Users是指调用那个子组件。（前面的“users”:可以省略书写）
   components:{
   "users":Users
   }
3. 最后在template模板中使用users标签。