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

1.1 局部注册

1.特点：

只能在注册的组件内使用

2.步骤：

1. 创建.vue文件（三个组成部分）
2. 在使用的组件内先导入再注册，最后使用
   a)、import Footer from './components/TestFooter.vue'
   b)、components: {
   // '组件名': 组件对象
   // Header:Header,
   Header, // 当组件名和组件对象相同时，可以简写为组件名
   GMain:Main,
   GFooter:Footer,
   }
   c)、<Header></Header>

3.使用方式：

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

4.注意：

组件名规范 —> 大驼峰命名法， 如 XxHeader

5.语法：

<template>
  <div class="app">
// 类比background-corlor backgroundCorlor 
    <Header></Header>
    <GMain/> // 单标记标签
    <g-footer></g-footer> // 中横线写法
    <!-- <g-footer/> // 中横线写法和单标记标签 -->
  </div>
</template>
<!-- 局部注册组件，三个步骤：
1.导入
2.注册成html标签（这样标签就代表了组件）
3.页面中使用<GHeader></GHeader> -->
<script>
import Footer from './components/TestFooter.vue'
import Header from './components/TestHeader.vue'
import Main from './components/TestMain.vue'
  export default {
    components: {
      // '组件名': 组件对象
      // Header:Header,
      Header, // 当组件名和组件对象相同时，可以简写为组件名
      GMain:Main,
      GFooter:Footer,
    }
  }
</script>

<style lang="less" scoped>
.app {
  padding: 10px;
  background-color: #87ceeb;
}
</style>

1.2 全局注册

1.特点：

全局注册的组件，在项目的任何组件中都能使用

2.步骤

1. 创建.vue组件（三个组成部分）
2. main.js中进行全局注册

3.使用方式

当成HTML标签直接使用

<组件名></组件名>

4.注意

组件名规范 —> 大驼峰命名法， 如 HmHeader

5.语法

Vue.component('组件名', 组件对象)

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

// 全局注册组件（注册后，可以在任何组件中使用）
// 1.导入组件
import TestButton from './components/TestButton.vue'
// 全局注册组件
// Vue.component('标签名', 导入的变量名)
Vue.component('TestButton', TestButton)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')