VUE系列二：组件嵌套

一、新建一个组件Users.vue

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

<script>
export default {
  name: 'users',
  data () {
    return {
      users:["henry", "bucky", "emily"]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

二、全局注册组件

1. 在main.js里面引入组件Users.vue

// 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' //导入vue
import App from './App' //导入根组件App.vue
import Users from './components/Users'//导入组件Users.vue

Vue.config.productionTip = false

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

/* eslint-disable no-new */
new Vue({ //实例化一个vue对象
  el: '#app', //index.html的根元素app
  components: { App },//注册根组件App.vue才能使用
  template: '<App/>'//VUE模板使用，可以是组件、html标签等
})

2. 在根组件App.vue里面使用组件users

// 1. 模板：html结构 有且只有一个根标签
<template>
  <div id="app">
    <HelloWorld/> <!--使用组件HelloWorld  -->
    <users></users><!--使用组件users  -->
  </div>
</template>

//2. 行为：处理逻辑
<script>
//导入组件HelloWorld.vue
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',//组件App.vue的名字
  components: {
    HelloWorld, //注册组件HelloWorld才能使用
  }
}
</script>

//3. 样式：解决样式
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

三、局部注册组件

1. 删除main.js里面注册的全局组件users

2. 在根组件app.vue里面局部注册和使用组件

// 1. 模板：html结构 有且只有一个根标签
<template>
  <div id="app">
    <users></users><!--使用组件users  -->
  </div>
</template>

//2. 行为：处理逻辑
<script>
//局部注册组件Users.vue
import Users from './components/Users'//导入组件Users.vue

export default {
  name: 'App',//组件App.vue的名字
  components: {
    "users" : Users //注册组件Users.vue才能使用
  }
}
</script>

//3. 样式：解决样式
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

四、页面呈现效果