Vue 注册全局组件的方式

一、语法：Vue的实例.component("组件名称",组件）

1、方式一：这个组件就是 vue文件

import { createApp,h } from 'vue' //引入 创建vue实例的api
import App from './App.vue'  //引入  根组件

let app = createApp(App)  // 创建vue实例对象 =>用户vue实例给你提供的方法
console.log(app);  //对象
import BackTop from './HeightComponent/BackTop.vue'


// 1vue 操作的 虚拟dom => js 对象

//注册全局组件
console.log(BackTop);
app.component('BackTops',BackTop)
app.mount('#app')   //将vue 挂载到 html 指定的元素上

2、方式二：这个组件就是 对象

import { createApp,h } from 'vue' //引入 创建vue实例的api
import App from './App.vue'  //引入  根组件

let app = createApp(App)  // 创建vue实例对象 =>用户vue实例给你提供的方法
console.log(app);  //对象
import BackTop from './HeightComponent/BackTop.vue'


// 1vue 操作的 虚拟dom => js 对象
// 2 vue的组件 解析成 一个对象 ={}
//注册全局组件
console.log(BackTop);
app.component('BackTops',{   // render =>  就是将vnode 变成真实dom 
    // h 函数 =》 创建  vnode   
    //语法  h(元素名称 ,这个元素的数据,子集)
    render(){
        return  h('h2',{id:'apps'},'同学',h('span',{},'111'))  //  =》<h2> <span><span></h2>
    }
})
app.mount('#app')   //将vue 挂载到 html 指定的元素上

3、单独创建文件，实现自动引入组件，自动注册全局组件

　　问题：在项目中注册的全局组件，会有很多，如果在这个mian.js中进行引入注册，代码很多

　　解决方法：单独创建文件，自动引入需要注册的组件

　　步骤一：

// 这个文件 就是自动给我们注册全局组件文件

// 自己写一个插件  app.use

// app.use作用
// 注册插件的=》 就是我们自己写的一个方法和vue项目进行关联，在自己的放中可以使用vue 提到api

//app.use 作用 
//app.use（对象的形式）

// 特点 
//1 如果这个对象中有一个属性  install,这个install 属性的值是一个方法，会自动执行这个方法
// 并且这个方法的第一个参数就是当前vue 实例对象
//2 如果app.use这个 里面放的是一个方法，并且这个方法的第一个参数就是当前vue 实例对象,就是自定执行这个方法



// let obj = {
//     install(App){
//         console.log(1000,App); //使用vue 提供的方法
//     }
// }
  //引入组件  我这个插件 模块化=》

  import  BackTop from './BackTop.vue'
  import  Winput from './Winput.vue'

  let arrs = [
    {
    name:'BackTop',com:BackTop
  },
  {
    name:'Winput',com:Winput
  },
]
function obj(App){
    console.log(66666,App);

    // 自动注册 全局组件 多个 =》数组
    arrs.forEach((item)=>{
        App.component(item.name,item.com)
    })

}

export default obj

步骤二：

//自动的方法
//  require.context('文件路径','布尔值','正则')

//语法：require.context('文件路径','布尔值','正则')

//api 两个  keys() =>文件路径 =》数组结构  webpack(文件路径).default 这个文件内容
//

function  getArrs(){
   let arrs = []
   let webpacks=   require.context('./',true,/\.vue/)
     console.log(webpacks.keys());

     webpacks.keys().forEach((item,index)=>{
        // ./BackTop.vue
        arrs.push({name:item.replace('./','').replace('.vue',''),com:webpacks(item).default})
     })


     return arrs
     
}

function obj(App){
    console.log(66666,App);

    //1 自动获取到 arrs 结构

   let comList =  getArrs()


   console.log(comList);

    comList.forEach((item)=>{
        App.component(item.name,item.com)
    })

}

export default obj

 // 步骤三：在入口文件main.js中引入这个文件

import { createApp,h } from 'vue' //引入 创建vue实例的api
import App from './App.vue'  //引入  根组件
// 3 引入文件暴露的内容
import obj from './HeightComponent/index.js'
import Wfonction from './HeightComponent/Wfonction'
let app = createApp(App)  // 创建vue实例对象 =>用户vue实例给你提供的方法
console.log(app);  //对象

// 3 全局注册组件
app.use( obj)
app.component('WfoN',Wfonction)
app.mount('#app')   //将vue 挂载到 html 指定的元素上