19-普通组件的注册使用

普通组件的注册使用-局部注册

一. 组件注册的两种方式:
1.局部注册:只能在注册的组件内使用

        (1) 创建 vue 文件(单文件组件)

        (2) 在使用的组件内导入,并注册 components:{ 组件名: 组件对象 }

        

// 导入需要注册的组件
import 组件对象 from.vue文件路径
import HmHeader from './components/XxHeader'

export default { 
    // 局部注册
    components: {
        组件名: 组件对象
        HmHeader: HmHeader
    }
}

2.全局注册:所有组件内都能直接使用(不需要再次导入)

        (1) 创建 .vue文件(单文件组件)

        (2) main.js 内导入, 并进行全局注册 Vue.component(组件名, 组件对象)

// main.js
// 导入需要全局注册的组件
import XxButton from './components/XxButton'

// 调用 Vue.component 进行全局注册
// Vue.component('组件名'，组件对象)
Vue.component('XxButton'， XxButton )

二. 使用:

        * 当成 html 标签使用 <组件名></组件名>

        * 技巧: 一般都用局部注册,如果发现确实是通用组件,再抽离到全局

三. 注意:

        * 组件名规范 -> 大驼峰命名法, 如 XxHeader

局部注册代码演示:

// 子组件: components / XxHeader.vue
<template>
    <div class="xx-header">
        我是头部组件xx-header
    </div>
  </template>
  
  
  <script>
  export default{
  
  
  }
  </script>
  
  
  
  <style>
  .xx-header{
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    background-color: #8064a2;
    color:white;
  }

  </style>

//子组件: components / XxMain.vue
<template>
    <div class="xx-main">
        我是主体组件xx-main
    </div>
  </template>
  
  
  <script>
  export default{
  
  
  }
  </script>
  
  
  
  <style>
  .xx-main{
    height: 400px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    background-color: #f79646;
    color:white;
    margin: 20px 0;
  }

  </style>

// 子组件: components / XxFooter.vue
<template>
    <div class="xx-footer">
        我是低部组件xx-footer
    </div>
  </template>
  
  
  <script>
  export default{
  
  
  }
  </script>
  
  
  
  <style>
  .xx-footer{
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    background-color: #4f81bd;
    color:white;
  }

  </style>

// 根组件 App.vue
<template>
  <div class="App">
    <!-- 头部组件 -->
    <XxHeader></XxHeader>

    <!-- 主体组件 -->
    <XxMain></XxMain>

    <!-- 底部组件 -->
    <XxFooter></XxFooter>

    <!--如果 XxMain + tab 不快捷出标签 -> 需要配置 vscode
      左下角设置中搜索 -> trigger on tab ->  勾上
    -->
    

  </div>
</template>


<script>
import XxHeader from './components/XxHeader.vue'
import XxMain from './components/XxMain.vue'
import XxFooter from './components/XxFooter.vue'

export default{
    components:{
      // '组件名':组件对象
      XxHeader:XxHeader,
      XxMain,
      XxFooter
    }

}
</script>



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

全局注册代码演示:

// 子组件: components / XxButton.vue

<template>
    <button class=xx-button>通用按钮</button>
  </template>
  
  
  <script>
  export default{
  
  
  }
  </script>
  
  
  
  <style>
  
.xx-button{
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background-color: #3bae56;
    border-radius: 5px;
}
  </style>

// main.js 进行全局注册

// 文件核心作用: 导入App.vue, 基于App.vue创建结构渲染index.html

import Vue from 'vue'
import App from './App.vue'

// 1. 编写导入的代码,往代码的顶部编写(规范)
import XxButton from './components/XxButton'


Vue.config.productionTip = false

// 2. 组件进行全局注册 -> 在所有的组件范围内都能直接使用
// Vue.component(组件名,组件对象)
Vue.component("XxButton",XxButton)


new Vue({
  // el: "#app", 作用: 和 $mount('选择器')作用一致,用于指定Vue所管理容器
  //render: h => h(App),
  render:(createElement) => {
    // 基于 App 创建元素结构
    return createElement(App)
  }
}).$mount('#app')

// 在其他组件直接使用(不需要导入) XxFooter.vue

<template>
    <div class="xx-footer">
        我是低部组件xx-footer

        <!-- 全局组件使用 -->
        <XxButton></XxButton>
    </div>
  </template>