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>