註冊全局組件
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>
頁面效果