文章目录
- 一、组件注册的两种方式
- 二、使用步骤
- 三、练习
一、组件注册的两种方式
-
局部注册:只能在注册的组件内使用
① 创建 .vue 文件 (三个组成部分)
以.vue结尾的组件,一般也叫做 单文件组件,即一个组件就是组件里的全部内容
② 在使用的组件内导入并注册
-
全局注册:所有组件内都能使用
二、使用步骤
步骤
- 创建.vue文件(三个组成部分)
- 在使用的组件内先导入再注册,最后使用
使用方式
当成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>