vue学习日记15：普通组件的注册使用

一、概念

（1）局部注册

（2）全局注册

二、实践

1.局部注册

（1）代码

步骤：创建组件导入注册使用

src文件夹下面仅仅保留这两个即可其他两个文件夹可以删除

在src下面建立components文件夹在下面新建vue文件作为组件

HmHeader.vue

<template>
<div class="hm-header">
  我是hm-header
</div>
</template>

<script>
export default {
  name: "HmHeader"
}
</script>

<style scoped>
.hm-header{
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #fa3d48;
  color: white;
}
</style>

在App.vue里面导入和引用

<template>
  <div class="App">
<!--    头部组件-->
    <HmHeader></HmHeader>
<!--    主题组件-->

   
<!--    底部组件-->


  </div>
<!--  -->
</template>


<script>
import HmHeader from './components/HmHeader'



export default {
  components:{
    // ‘组件名:组件对象 --组件名和组件对象一样可以省略 :组件对象
    HmHeader,
    

  }

}
</script>

<style>
.App{
  width: 600px;
  height: 700px;
  background-color: #0071cd;
  margin: 0 auto;
  padding: 20px;
}
</style>

同理其他两个组件一样的步骤

HmMain

<template>
  <div class="hm-main">
    我是hm-main
  </div>
</template>

<script>
export default {
  name: "HmMain"
}
</script>

<style scoped>
.hm-main{
  height: 400px;
  line-height: 200px;
  text-align: center;
  font-size: 30px;
  background-color: #e36011;
  color: white;
  margin: 20px 0;
}
</style>

HmFooter

<template>
  <div class="hm-footer">
    我是hm-footer
  </div>
</template>

<script>
export default {
  name: "HmFooter"
}
</script>

<style scoped>
.hm-footer{
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #fa3dc4;
  color: white;
}
</style>

App.vue

<template>
  <div class="App">
<!--    头部组件-->
    <HmHeader></HmHeader>
<!--    主题组件-->

    <HmMain></HmMain>
<!--    底部组件-->
    <HmFooter></HmFooter>

  </div>
<!--  -->
</template>


<script>
import HmHeader from './components/HmHeader'
import HmMain from './components/HmMain'
import HmFooter from './components/HmFooter'


export default {
  components:{
    // ‘组件名:组件对象 --组件名和组件对象一样可以省略 :组件对象
    HmHeader,
    HmMain:HmMain,
    HmFooter:HmFooter,


  }

}
</script>

<style>
.App{
  width: 600px;
  height: 700px;
  background-color: #0071cd;
  margin: 0 auto;
  padding: 20px;
}
</style>

（2）展示

2.全局注册

（1）代码

只需要在对应的组件内添加标签

HmButton

<template>
<button class="hm-button">通用按钮</button>
</template>

<script>
export default {
  name: "HmButton"
}
</script>

<style scoped>
.hm-button{
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: #12c71e;
  border-radius: 5px ;
  color: white;
  border: none;
  vertical-align: middle;
  cursor: pointer;
}
</style>

全局注册

// 此文件核心作用:导入App.vue 基于App.vue创建结构渲染index.html
//1.导入vue核心包
import Vue from 'vue'
//2.导入App.vue根组件
import App from './App.vue'
//编写导入的代码，往代码的顶部编写（规范）
import HmButton from './components/HmButton'

//进行全局注册
// Vue.component(组件名,组件对象)
Vue.component('HmButton',HmButton)
//提示：当前处于什么环境（生产环境/开发环境）
Vue.config.productionTip = false

//3.vue实例化 提供render方法 -> 基于App.vue创建结构渲染index.html
new Vue({
  // el:'#app',  //作用：和$mount（'选择器'）作用一样，用于指定vue所管理容器
  // render: h => h(App),  //简写 createElement是形参-->h
  render:(createElement) => {
    //基于App创建元素结构
    return createElement(App)
  }
}).$mount('#app')

只添加了<HmButton></HmButton>标签 HmFooter 同理

<template>
<div class="hm-header">
  我是hm-header
  <HmButton></HmButton>
</div>
</template>

<script>
export default {
  name: "HmHeader"
}
</script>

<style scoped>
.hm-header{
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #fa3d48;
  color: white;
}
</style>