Vue — 组件化开发
组件化开发：一个页面可以拆分成一个个组件；每个组件都有自己独立的结构、样式、行为
组件分类：普通组件、根组件
其中根组件包裹着所有普通小组件
- 普通组件的注册使用；有两种注册方式
- 局部注册
- 全局注册
局部注册
目标：
根组件（App.vue）：
<template> <div class="App"> <!-- 头部组件 --> <!-- 主体组件 --> <!-- 底部组件 --> </div> </template> <script> export default { } </script> <style> .App{ width:600px; height:700px; background-color: #87ceeb; margin: 0 auto; padding:20px; } </style>
- 创建组件 -> 往components里建
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>
- 在使用的组件内部导入、注册、使用
导入
注册
使用
完整代码：
App.vue
<template>
<div class="App">
<!-- 当成html标签使用：<组件名></组件名> -->
<!-- 头部组件 -->
<HmHeader></HmHeader>
<!-- 主体组件 -->
<HmMain></HmMain>
<!-- 底部组件 -->
<HmFooter></HmFooter>
</div>
</template>
<script>
// import 组件对象 from '.vue文件路径'
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>components -> 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>components -> HmMain.vue
<template>
<div class="hm-main">
我是hm-main
</div>
</template>
<script>
export default {
}
</script>
<style>
.hm-main {
height: 500px;
line-height: 500px;
text-align: center;
font-size: 30px;
background-color: #f79646;
color: white;
margin:20px 0;
}
</style>components -> 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>全局注册
先来看一下局部注册按钮
只能在注册的组件内使用
目标：
1.创建组件
2.导入、注册、使用
再来看一下全局注册通用按钮
目标：
在所有的组件范围内都能直接使用
- 创建组件 -> 往components里建
- 导入、注册 （在main.js里进行全局注册）
- 使用 <组件名></组件名>
完整代码：
App.vue
<template>
<div class="App">
<!-- 当成html标签使用：<组件名></组件名> -->
<!-- 头部组件 -->
<HmHeader></HmHeader>
<!-- 主体组件 -->
<HmMain></HmMain>
<!-- 底部组件 -->
<HmFooter></HmFooter>
</div>
</template>
<script>
// import 组件对象 from '.vue文件路径'
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>main.js
// 入口文件；第一个执行的文件；基于App.vue创建结构渲染index.html
// 导入Vue
import Vue from 'vue'
// 导入App.vue
import App from './App.vue'
import HmButton from './components/HmButton'
//提示当前处于什么环境（生产环境 / 开发环境)
Vue.config.productionTip = true //开发环境
// Vue.component('组件名'，组件对象)
Vue.component('HmButton',HmButton)
new Vue({
render: h => h(App)
}).$mount('#app')
components -> HmButton.vue
<template>
<button class="hm-button">通用按钮</button>
</template>
<script>
export default {
}
</script>
<style>
.hm-button {
height:50px;
line-height:50px;
padding:0 20px;
background-color: #3bae56;
border-radius:5px;
color:white;
border:none;
/* 垂直对齐 */
vertical-align: middle;
cursor:pointer;
}
</style>components -> HmHeader.vue
<template>
<div class="hm-header">
我是hm-header
<HmButton></HmButton>
</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>components -> HmMain.vue
<template>
<div class="hm-main">
我是hm-main
<HmButton></HmButton>
</div>
</template>
<script>
export default {
}
</script>
<style>
.hm-main {
height: 450px;
line-height: 500px;
text-align: center;
font-size: 30px;
background-color: #f79646;
color: white;
margin:20px 0;
}
</style>components -> HmFooter.vue
<template>
<div class="hm-footer">
我是hm-footer
<HmButton></HmButton>
</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>