组件化开发：一个页面可以拆分成一个个组件；每个组件都有自己独立的结构、样式、行为
组件分类：普通组件、根组件
其中根组件包裹着所有普通小组件
- 普通组件的注册使用；有两种注册方式
- 局部注册
- 全局注册
局部注册
目标：
根组件（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>
)