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

发布于:2021-03-27 10:38:01

当前页面引入组件


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


觉得有用请点个赞吧!
1 528