VueCil- 组件嵌套局部组件和全局组件使用

main.js

import Vue from 'vue'
import App from './App.vue'
//import Users from "./components/Users";

Vue.config.productionTip = false;
//全局注册组件
//Vue.component("users",Users);

new Vue({
  render: h => h(App),
}).$mount('#app');

//index.html->main.js->App.vue

App.vue

<template>
  <div id="app">
    <h1>{{title}}</h1>
    <users></users>
  </div>
</template>

<script>
//局部注册组件
import Users from './components/Users'

export default {
  name: 'app',
  data(){
    return{
      title:"这是第一个Vue脚手架"
    }
  },
  components:{
    "users":Users
    //也可以省略掉key
    //Users
  }
}
</script>

<style>

</style>

components/Users.vue

<template>
  <div class="users">
    <ul>
        <li v-for="(user,index) in users" :key="index">
            {{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>