注册全局组件
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
}
}
页面效果
