注冊全局元件
1.新增Users.vue
- {{val}}
//js 邏輯部分
export default {
data() {
return {
users:["sunwuk","zhubj","shawujing"]
};
}
}
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使用元件
export default {
name: 'app',
components: {
}
}
注冊局部元件
APP.vue中注冊和使用元件
//注冊局部元件
//1 引入元件
import Users from './components/Users.vue'
export default {
name: 'app',
components: { //2 注冊元件
Users
}
}
頁面效果
