在Vue中注册全局组件、全局方法

baby加油_

已于 2023-02-17 15:35:40 修改

阅读量1.5k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-02-15 14:23:05 首次发布

本文链接：https://blog.csdn.net/qq_34664239/article/details/129042708

版权

vue 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

文章介绍了如何在Vue应用中注册全局组件，包括在main.js中直接注册和通过新建index.js文件使用插件形式注册。对于全局方法的注册，展示了在main.js中直接注册以及在util.js文件中创建插件安装的方法，分别适用于Vue2和Vue3版本。

摘要由CSDN通过智能技术生成

一、注册全局组件

在main.js中直接注册

//引入
import FixedTop from '@/components/FixedTop
import FixedBop from '@/components/FixedBop 
//注册为全局组件，可以注册多个
Vue.componet('FixedTop',FixedTop)
Vue.componet('FixedBop ',FixedBop )
//页面无需引入，直接使用
<FixedTop />

在main.js中直接注册使用插件的形式注册

在 components 目录下新建 index.js 文件

//引入
import FixedTop from '@/components/FixedTop'
import FixedBottom from '@/components/FixedBottom'
export default {
  install(Vue){
    //注册全局组件
    Vue.componet('FixedTop',FixedTop)
    Vue.componet('FixedBottom ',FixedBottom )
}

在mian.js中注册

import install form '@/components'
Vue.use(install)

二、注册全局方法

在main.js中直接注册

//vue2写法：注册到实例上
Vue.prototype.$test = function () {
  console.log('test222')
}
//vue3写法
app.config.globalProperties.$test = function () {
  console.log('test222')
}

在main.js中直接注册使用插件的形式注册

在 common目录下新建util.js 文件

export default {
  install (app) {
  	//vue2
  	Vue.prototype..$test = function () {
	  console.log('test222')
	}
	//vue3
    app.config.globalProperties.$test = function () {
      console.log('test')
    }
  }
}
在mian.js中注册
import utils from '@/common/utils'
app.use(utils)