VUE注册全局组件和局部组件过程解析

这篇文章主要介绍了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)


/* eslint-disable no-new */
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>

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