vue-cli 当页组件的和全局组件的引入

当前页面引入组件

<template>
  <div class="home">
    <Header/>
    <Footer/>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'

export default {
  name: 'Home',
  components: {
    Header,
    Footer
  }
}
</script>

全局组件的引入

有些组件我们很多页面都需要使用，你不需要每个页面都引入一次

只需要再main.js 引入一次，其他页面就可以直接使用了

第一步：创建一个组件

新建一个组件：components/BannerSub.vue

<template>
<div>
  <div class="banner">
      <img :src="src" alt="" />
    </div>
</div>
</template>

<script>
import img from '../assets/images/banner_qw.png'
export default {
  name: 'BannerSub',
  props: {
    src:{
      type:String,
      default:img
    }
  }
}
</script>

<style scoped>

</style>

第二步：

在 main.js  中引入注册组件

import BannerSub from '@/components/BannerSub.vue'
Vue.component('BannerSub',BannerSub);

第三步：

在页面中使用组件

<BannerSub/>