首页 > 其他分享 >vue3挂载全局方法

vue3挂载全局方法

时间:2023-04-02 22:01:16浏览次数:38  
标签:方法 app vue3 挂载 全局 config

  • 在vue3中可以通过app.config.globalProperties来挂载全局方法。

main.js

const app = createApp(App)

// 定义全局方法
const myGlobalMethod = () => {
  console.log('This is a global method.')
}

// 挂载全局方法
app.config.globalProperties.$myGlobalMethod = myGlobalMethod

app.mount('#app')

app.vue

<template>
  <div>
    <button @click="$myGlobalMethod()">点击调用全局方法</button>
  </div>
</template>
  • 挂载在app.config.globalProperties上的方法和属性,在所有组件中都可以直接访问和使用.如果有多个全局方法需要挂载,可以在main.js中一次性挂载完成。

标签:方法,app,vue3,挂载,全局,config
From: https://www.cnblogs.com/pansidong/p/17281519.html

相关文章

  • Vue3.0
    1.setup1.理解:Vue3.0中一个新的配置项,值为一个函数2.setup是所有CompositionAPI的表演的舞台3.组件用所用到的:数据方法等等,均要配置在setup中4.setup函数的两种返回值​1.若返回一个对象,则对象中的属性,方法在模板中均可以直接使用(重点关注!)​2.若返回......
  • 逆向——如何区分全局变量和局部变量
    第三节局部变量与全局变量的区别记住知识点:1、全局变量,在程序生成后,内存地址是固定了,只有重新编译后,内存地址才会改变。2、全局变量,在汇编中是内存地址的格式存储;局部变量是以[ebp-xxx]的格式存储。  局部变量与全局变量的区别全局变量与局部变量的区别在于作用域的......
  • CentOS7.2T以上磁盘挂载
    CentOS7.服务器挂载大于2T磁盘目录CentOS7.服务器挂载大于2T磁盘0.环境信息Linux原理1.详细挂载步骤1.1.查看当前系统磁盘使用情况1.2.查看是否有未知硬盘未挂载1.3.挂载硬盘-使用parted1.3.1.使用parted命令1.3.2.创建labelgptl执行两次1.3.3.依次录入yes/mkpart......
  • 基于VUE3开发的CAD图可视化平台代码开源了
    前言唯杰地图VJMAP为CAD图或自定义地图格式WebGIS可视化显示开发提供的一站式解决方案,支持的格式如常用的AutoCAD的DWG格式文件、GeoJSON等常用GIS文件格式,它使用WebGL矢量图块和自定义样式呈现交互式地图,提供了全新的大数据可视化可视化功能。唯杰地图可视化平台旨在打造......
  • 挂载NTFS磁盘,修复磁盘,格式化磁盘时一直失败怎么办?
    NTFSDiskbyOmiNTFSforMac是一款NTFS磁盘管理器,支持在Mac电脑上读写NTFS格式的磁盘。它允许用户访问存储在NTFS磁盘上的文件,而无需重新格式化磁盘或使用USB驱动器或云存储等文件传输方法。有朋友反映,挂载NTFS磁盘,修复磁盘,格式化磁盘时一直失败怎么办?下面就和小编一起来看......
  • 用户注册,用到局部钩子校验和全局钩子检验
    1.路由分发 2.局部钩子对字段单独校验和re_password校验不入库操作  3.views  4.models ......
  • vue3 directive自定义指令
    importstorefrom'../store'//新建jsexportdefault{install(app){//权限控制,没有相关的权限,则删除模块app.directive('permission',{mounted(el,val){if(el&&!store.state.rule.includes(val.valu......
  • Vue3学习笔记(7.0)
    Vue3计算属性计算属性关键词:computed计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符的例子:<!--*@Author:[email protected]*@Date:2023-03-3008:30:35*@LastEditors:Mei*@LastEditTime:2023-03-3008:33:36*@FilePath:\vscode\vue_co......
  • Vue3学习笔记(4.0)
    vue.js为两个最为常用的指令提供了特别的缩写://全称<av-bind:href="url"></a>//缩写<a:href="url"></a>v-on缩写//全称<av-on:click="doSomething"></a>//缩写<a@click="doSonthing"></a>条件判断条件判断使......
  • vue3面包屑导航栏
    import{useRoute,useRouter}from"vue-router";import{computed,ref,watch,watchEffect,nextTick}from"vue";constrouter=useRouter()constroute=useRoute()constbreadcrumb=ref([])/***@Date:2023-03-2817:55:20*@descript......