一、前言

​ 本文介绍 vue-cli组件的使用，基于已经搭建好的基础项目。关于 vue-cli 构建项目的详细流程，可参考博文：使用vue脚手架构建项目

二、使用步骤

1、创建Header.vue组件

1. 在components 目录下创建 Header.vue

   

2. 编写Header.vue

   <template>
       <div class="header">{{msg}}</div>
   </template>
   
   <script>
   export default {
       name:"Header", //组件名称
       data() {    //data函数
           return {
               msg: "这是一个Header组件",
           };
       },
   }
   </script>
   
   //scoped 表示当前的样式,只作用与当前组件中的 template 视图.
   <style scoped>
   .header {
    height: 100px;
    line-height: 100px;
    background-color: #eee;
    text-align: center;
    color: blue;
   }
   </style>
   
   

2、引入 Header组件

修改HomeView.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- header组件显示 -->
    <Header/>
    
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

// 导入Header组件
import Header from '@/components/Header.vue'

export default {
  name: 'HomeView',
  components: {
    // HelloWorld
    Header  //引入组件
  }
}
</script>

3、测试结果

---

三、组件的传参

1、修改 Header.vue

<template>
    <div class="header">{{msg}}</div>
</template>

<script>
export default {
    name:"Header", //组件名称
    // data() {    //data函数
    //     return {
    //         msg: "这是一个Header组件",
    //     };
    // },

    //通过props传参
    props:['msg']
}
</script>

//scoped 表示当前的样式,只作用与当前组件中的 template 视图.
<style scoped>
.header {
 height: 100px;
 line-height: 100px;
 background-color: #eee;
 text-align: center;
 color: blue;
}
</style>

2、修改HomeView.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- header组件显示 -->
    <Header msg="通过props属性传递的参数显示！！！"/>
    
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

// 导入Header组件
import Header from '@/components/Header.vue'

export default {
  name: 'HomeView',
  components: {
    // HelloWorld
    Header  //引入组件
  }
}
</script>

3、测试结果