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>