【V4】组件开发

image.png

Home.vue将要引入组件 HomeHeader.vue(组件)

<template>
  <div>
    <home-header></home-header>
    <router-link to="/city">城市列表</router-link>
  </div>
</template>

<script>
import HomeHeader from './components/HomeHeader'
export default {
  name: 'Home',
  components: {
    HomeHeader
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>

HomeHeader.vue

<template>
  <div>
    公共导航栏
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>