Vue入门基础（组件嵌套）

注册全局组件

1.新增Users.vue

<template >
  <div id="users">
    <ol>
        <!-- vue 遍历需要key属性绑定-->
        <li v-for="(val,index) in users" :key="index">
            {{val}}
        </li>
    </ol>
  </div>
</template>

<script>
//js 逻辑部分
export default {
  data() {
    return {
     users:["sunwuk","zhubj","shawujing"]
    };
  }
}
</script>

<style>
</style>

2,main.js注册全局组件

import Vue from 'vue'
import App from './App.vue'

//注册全局组件
//1 引入组件
import Users from './components/Users.vue'
//2 注册组件
Vue.component("Users",Users);

Vue.config.productionTip = false

//实例一个vue对象  这里的app 对应index里面的id=app的div容器
new Vue({
  render: h => h(App),
}).$mount('#app') 

3.APP.vue使用组件

<template>
  <div id="app">
    <!--使用组件-->
    <Users/>
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
    
  }
}
</script>

<style>

</style>

 

注册局部组件

APP.vue中注册和使用组件

<template>
  <div id="app">
    <!--使用组件-->
    <Users/>
  </div>
</template>

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

export default {
  name: 'app',
  components: { //2 注册组件
    Users
  }
}
</script>

<style>

</style>

页面效果