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>

頁面效果