这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

全局组件

第一步：在components文件夹下建立一个子文件Users.vue

<template> <div class="users"> {{msg}} </div></template><script>export default { name: 'users', data () { return { msg: '用户名' } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped> </style>

第二步：在main.js中进行全局注册

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'// 全局配置组件第一步 Users是文件夹的名字import Users from './components/Users'Vue.config.productionTip = false// 全局注册组件第二部 users是Vue.component('users',Users)new Vue({ el: '#app', router, components: { App }, template: '<App/>'})

第三步：在对应的文件中引用

<template> <div id="app"> <!-- <router-view/>是子路由视图 --> <!-- <router-view/> --> <p>{{title}}</p> <users></users> </div></template><script>export default { name: 'App', data(){ return{ title:"users是全局组件的实例化的名字" } }}</script><style></style>

局部组件

在components文件夹下新建一个子组件Users.vue文件，然后在对应的文件中引用

<template> <div id="app"> <!-- <router-view/>是子路由视图 --> <!-- <router-view/> --> <p>{{title}}</p> <users></users> </div></template><script>import Users from './components/Users'export default { name: 'App', data(){ return{ title:"users是全局组件的实例化的名字" } }, components:{ Users, }}</script><style></style>

或者

<template> <div id="app"> <app-header></app-header> <users></users> <app-footer></app-footer> </div></template><script>import Users from './components/Users'import Header from './components/Header'import Footer from './components/Footer'export default { name: 'App', data(){ return{ title:"users是全局组件的实例化的名字" } }, components:{ 'users':Users, 'app-header':Header, 'app-footer':Footer }}</script><style></style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。