vue系列文章（14）vue-cli脚手架，组件嵌套，全局组件注册和局部组件注册

首先新建我们自定义组件Users组件，并在组件中加入我们自己的内容，如下所示，自定义Users组件，并对users进行循环输出。

 

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

<script>
export default {
  name: 'users',
  data () {
    return {
      users: ['hello','world','king'] 
    }
  }
}
</script>

<style scoped>

</style>

那么我们如何在App.vue中将我们Users组件进行展示出来的呢，需要将Users组件进行注册，下面有两种注册方式。第一种是全局组件注册，如下在main.js

 

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Users from './components/Users'

Vue.config.productionTip = false

// 全局注册组件
Vue.component("users",Users)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

那么我们就可以在App.vue中直接引入users组件了

 

<template>
  <div id="app">
    <users></users>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>

</style>

全局组件平时使用的频率并不多，大多数都是局部组件，下面是第二种局部注册组件。

 

<template>
  <div id="app">
    <users></users>
  </div>
</template>

<script>
//局部注册组件
import Users from './components/Users'
export default {
  name: 'App',
  components: {
    "users": Users
  }
}
</script>

<style>

</style>

   Vue系列文章目录 

1. vue系列文章（1）：对象绑定，属性绑定
2. Vue系列文章（2）事件绑定，鼠标点击事件
3. vue系列文章（3）：事件修饰符
4. Vue系列文章（4）键盘事件及键盘修饰符
5. vue系列文章（5）双向数据绑定
6. vue系列文章（6）计算属性computed
7. vue系列文章（7）动态CSS类型绑定
8. vue系列文章（8）条件渲染
9. vue系列文章（9）v-for条件循环
10. vue系列文章（10）vue实战项目demo
11. vue系列文章(11)：初始化多个实例对象
12. vue系列文章（12）初始组件的应用
13. Vue系列文章（13）vue cli脚手架
14. vue系列文章（14）vue-cli脚手架，组件嵌套，全局组件注册和局部组件注册
15. vue系列文章（15）属性传值props
16. vue系列文章（16）传值和传引用的类型和区别
17. vue系列文章（17）利用事件传递将子组件值传递给父组件
18. vue系列文章（18）vue生命周期
19. vue系列文章（19）vue路由配置
20. vue系列文章（20） vue网络请求vue-resource

 如果上面文章对你有用，打赏下我吧@*@