VUE中怎么注冊(cè)全局組件和局部組件

這篇文章將為大家詳細(xì)講解有關(guān)VUE中怎么注冊(cè)全局組件和局部組件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

全局組件

第一步：在components文件夾下建立一個(gè)子文件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中進(jìn)行全局注冊(cè)

// 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

// 全局注冊(cè)組件第二部  users是
Vue.component('users',Users)


/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

第三步：在對(duì)應(yīng)的文件中引用

<template>
 <div id="app"> 
  <!-- <router-view/>是子路由視圖 -->
  <!-- <router-view/> -->
  <p>{{title}}</p>
  <users></users>
 </div>
</template>

<script>
export default {
 name: 'App',
 data(){
  return{
   title:"users是全局組件的實(shí)例化的名字"
  }
 }
}
</script>

<style>

</style>

局部組件

在components文件夾下新建一個(gè)子組件Users.vue文件，然后在對(duì)應(yīng)的文件中引用

<template>
 <div id="app"> 
  <!-- <router-view/>是子路由視圖 -->
  <!-- <router-view/> -->
  <p>{{title}}</p>
  <users></users>
 </div>
</template>

<script>
/*局部注冊(cè)組件*/
import Users from './components/Users'
export default {
 name: 'App',
 data(){
  return{
   title:"users是全局組件的實(shí)例化的名字"
  }
 },
 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是全局組件的實(shí)例化的名字"
  }
 },
 components:{
  'users':Users,
  'app-header':Header,
  'app-footer':Footer
 }
}
</script>

<style>

</style>

關(guān)于VUE中怎么注冊(cè)全局組件和局部組件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。