【Vue】普通组件的注册使用-局部注册

一、组件注册的两种方式

1. 局部注册：只能在注册的组件内使用

   ① 创建 .vue 文件 (三个组成部分)

   以.vue结尾的组件，一般也叫做 单文件组件，即一个组件就是组件里的全部内容

   ② 在使用的组件内导入并注册

2. 全局注册：所有组件内都能使用

---

二、使用步骤

步骤

1. 创建.vue文件（三个组成部分）
2. 在使用的组件内先导入再注册，最后使用

使用方式

当成html标签使用即可 <组件名></组件名>

注意

组件名规范 —> 大驼峰命名法， 如 HmHeader

语法

① 创建 .vue 文件 (三个组成部分)

创建是往components（注意是复数）目录里建

② 在使用的组件内导入并注册

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'

export default {  // 局部注册
  components: {
   '组件名': 组件对象,
    // 前面是我们将来需要使用的名字，后面是导过来的变量名，一般情况下这两个会起同样的名字
    HmHeader:HmHeaer,
    HmHeader
  }
}

---

三、练习

需要备份一份src直接在空白的地方粘贴即可

在App组件中，完成以下练习。在App.vue中使用组件的方式完成下面布局

App.vue

<template>
  <!-- 这个类名最好是跟当前的组件名同名 -->
  <div class="App">
    <!-- 头部组件 -->
    <HmHeader></HmHeader>
    <!-- 主体组件 -->
    <HmMain></HmMain>
    <!-- 底部组件 -->
    <HmFooter></HmFooter>

    <!-- 如果 HmFooter + tab 出不来 → 需要配置 vscode
         设置中搜索 trigger on tab → 勾上
    -->
  </div>
</template>

<script>
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {
  components: {
    // '组件名': 组件对象
    // 同名的时候是可以简写的
    HmHeader: HmHeader,
    HmMain,
    HmFooter
  }
}
</script>

<style>
.App {
  width: 600px;
  height: 700px;
  background-color: #87ceeb;
  margin: 0 auto;
  padding: 20px;
}
</style>

HmHeader.vue

<template>
  <!-- 在类名中，多个单词用 - 连接 -->
  <div class="hm-header">
    我是hm-header
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-header {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #8064a2;
  color: white;
}
</style>

HmMain.vue

<template>
  <div class="hm-main">
    我是hm-main
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-main {
  height: 400px;
  line-height: 400px;
  text-align: center;
  font-size: 30px;
  background-color: #f79646;
  color: white;
  margin: 20px 0;
}
</style>

HmFooter.vue

<template>
  <div class="hm-footer">
    我是hm-footer
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-footer {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #4f81bd;
  color: white;
}
</style>