10、Vue组件

一、组件可以扩展 HTML 元素，封装可重用的代码

头部可以作为组件，首页和列表页使用

1、新建组件

<template>
  <div>
    <h2>我是头部</h2>
  </div>
</template>

<script>
  export default {
    name: "Header"
  }
</script>

2、App.vue引入组件

<template>
  <div id="app">   
  </div>
</template>

<script>
  import header from './components/Header.vue';

  export default {
    name: 'App',
    data() {
      return {       
      }
    }
  }
</script>

3、注册组件

<template>
  <div id="app">
    
  </div>
</template>

<script>
  import header from './components/Header.vue';

  export default {
    name: 'App',
    data() {
      return {
      
      }
    },    
    components: {
      'v-header': header
    }
  }
</script>

4、使用组件

<template>
  <div id="app">
    <v-header></v-header>
  </div>
</template>

<script>
  import header from './components/Header.vue';

  export default {
    name: 'App',
    data() {
      return {
      }
    },
    components: {
      'v-header': header
    }
  }
</script>