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