今天学vue的组件化开发,组件的局部注册和全局注册
现在写页面就可以像拼图一样,将一个个组件拼起来了,方便快捷了不少.
今日代码
<template>
<div class="hm-Footer">
芝士Footer <hm-button>按钮</hm-button>
</div>
</template>
<script>
import HmButton from './HmButton.vue'
export default {
components: { HmButton },
}
</script>
<style>
.hm-Footer{
height: 100px;
text-align: center;
font-size: 30px;
background-color: #4132c3;
color: white;
}
</style>
<template>
<div class="hm-main">
芝士main
</div>
</template>
<script>
export default {
}
</script>
<style>
.hm-main{
height: 400px;
text-align: center;
font-size: 30px;
background-color: #a58e28;
color: white;
margin: 20px 0;
}
</style>
<template>
<div class="hm-header">
芝士header
</div>
</template>
<script>
export default {
}
</script>
<style>
.hm-header{
height: 100px;
text-align: center;
font-size: 10px;
background-color: #8064a2;
color: white;
}
</style>
<template>
<button class="hm-button">通用按钮</button>
</template>
<script>
export default {
}
</script>
<style>
.hm-button{
height: 50px;
line-height: 50px;
padding: 0 20px;
background-color: yellow;
border-radius: 5px;
vertical-align: middle;
}
</style>
<template>
<div class="App">
<HmHeader></HmHeader>
<HmMain></HmMain>
<HmFooter></HmFooter>
</div>
</template>
<script>
import HmHeader from './components/HmHeader.vue';
import HmFooter from './components/HmFooter';
import HmMain from './components/HmMain.vue';
export default {
components:{
HmHeader,
HmMain,
HmFooter,
}
}
</script>
<style>
.App{
width: 600px;
height: 600px;
background-color: #87ceeb;
margin: 0 auto;
padding: 20px;
}
</style>
import Vue from 'vue'
import App from './App.vue'
//导入需要全局注册的组件
import HmButton from './components/HmButton'
//调用Vue.component 进行全局注册
//Vue.component('组件名',组件对象)
Vue.component('HmButton',HmButton)
new Vue({
render: h => h(App),
}).$mount('#app')
标签：vue,color,height,components,import,2.13,HmButton From： https://www.cnblogs.com/daniel350-wang/p/18030352