首页 > 其他分享 >Vue3如何绑定全局方法和变量

Vue3如何绑定全局方法和变量

时间:2024-06-19 13:31:25浏览次数:24  
标签:const app 绑定 js Vue3 import 全局 testFn

Vue 2 中 Vue.prototype绑定全局方法,此写法在 Vue 3 已经不存在了。与任何全局的东西一样,应该谨慎使用。

Vue3使用provide/inject 或者app.config.globalProperties进行绑定

如果全局属性与组件自己的属性冲突,组件自己的属性将具有更高的优先级。

 

一、provide/inject方法
 1. test.js文件中定义需要绑定的方法和变量
// test.js
export const testFn = () => {
  console.log('testFn---');
}
export const testName = '哎呀'
 2. main.js文件中引入绑定的方法和变量 ,并通过app.provide注入全局方法和变量
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { testFn1, testFn, testName, testName1 } from './utils/test.js';

const app = createApp(App);

// 绑定全局方法
app.provide('testFn', testFn)

// 绑定全局变量
app.provide('testName', testName)

app.use(router);
app.mount('#app');
3. about.vue文件中通过inject获取全局方法和变量 
<!-- about.vue -->
<template>
  <div>about</div>
</template>
<script setup>
import { inject } from 'vue'
const testFn = inject('testFn')
testFn()

const testName = inject('testName')
console.log('testName--', testName);

</script>

二、app.config.globalProperties
 1. test.js文件中定义需要绑定的方法和变量
// test.js
export const testFn1 = () => {
  console.log('testFn1---');
}

export const testName1 = '哎呀呀呀'
 2. main.js文件中引入绑定的方法和变量 ,并通过app.provide注入全局方法和变量
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { testFn1, testFn, testName, testName1 } from './utils/test.js';

const app = createApp(App);

// 绑定全局方法
app.config.globalProperties.testFn1 = testFn1

// 绑定全局变量
app.config.globalProperties['testName1'] = testName1

app.use(router);
app.mount('#app');
3. about.vue文件中通过inject获取全局方法和变量 
<!-- about.vue -->
<template>
  <div>about</div>
</template>
<script setup>
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
proxy.testFn1()
console.log('testName1--', proxy.testName1);

</script>

做个记录,如有不足,欢迎补充。

不要忽视你达成的每个小目标,它是你前进路上的垫脚石。冲!

标签:const,app,绑定,js,Vue3,import,全局,testFn
From: https://blog.csdn.net/qq_54548545/article/details/139800116

相关文章

  • 从局部到全局:产品开发视角的转变与系统优化策略
    一、研发背景在科技产品开发领域,每一种产品都存在着多元化的开发方案可供选择,这要求开发者不断拓展视野,进行横向对比学习,以期找到最贴合市场需求、最具竞争优势的解决方案。以往,我们的研发团队一直立足于稳固而成熟的硬件平台之上,倾注心力专攻电机控制软件开发,积累了丰富的专......
  • Vue3鼠标悬浮个人头像时出现修改头像,点击出现弹框,上传头像使用cropperjs可裁剪预览
    实现效果:鼠标悬浮到头像上,下方出现修改头像点击修改头像出现弹框,弹框中可上传头像,并支持头像的裁剪及预览 实现方式: 1.tempalte中<divclass="img-box"> <imgv-if="avatarImgUrl":src="avatarImgUrl"class="avatar"/> <divclass="text"@......
  • 理解 C++ 中的对象类型与绑定机制:静态绑定 vs 动态绑定
    静态绑定和动态绑定概念解释对象的静态类型:对象在声明时采用的类型,在编译期确定,无法更改。对象的动态类型:对象在运行期实际表现的类型,在运行期决定,对象的动态类型可以更改(通过多态和指针/引用的方式)。静态绑定:绑定的是对象的静态类型,某特性(比如函数调用)依赖于对象的静......
  • vue3cron表达式
     引用:js部分importcmCronfrom'../../components/cmCron/index.vue';constshortcuts=[     {      text:"每天8点和12点(自定义追加)",      value:"008,12**?"     }    ]; 模板部分: ......
  • BizDevOps全局建设思路:横向串联,纵向深化
    本文来自腾讯蓝鲸智云社区用户:CanWayBizDevOps概述IT技术交付实践方法在不断迭代中持续优化。在工业化时代,Biz(业务)、Dev(开发)、Ops(运维)三者往往相对分离,甚至有时只有其中的两者或仅有一者独立存在。然而,随着时代的演进,互联网化时代带来了敏捷的先进思想,推动了业务与技术的初步......
  • 【Error】全局异常处理器
    定义全局异常处理器非常简单,就是定义一个类,在类上加上一个注解@RestControllerAdvice,加上这个注解就代表我们定义了一个全局异常处理器。在全局异常处理器当中,需要定义一个方法来捕获异常,在这个方法上需要加上注解@ExceptionHandler。通过@ExceptionHandler注解当中的value属性......
  • NPOI给模板绑定下拉项
    1、.xlsx后缀模板使用NPOI版本【v2.7.0】usingNPOI.HSSF.UserModel;usingNPOI.SS.UserModel;usingNPOI.SS.Util;usingNPOI.XSSF.UserModel;///<summary>///模板初始化///</summary>publicvoidTemplateInit(){str......
  • VSCode 中 Vue3:找不到模块 “./XXX.vue” 或其相应的类型声明
    问题!代码可以正常运行,但VSCode报错:找不到模块“./App.vue”或其相应的类型声明别再去愚昧的添加d.ts啦!只需在VSCode安装TypeScriptVuePlugin(Volar)拓展享受完全体的Vue导入!......
  • 【Vue3的组合式API】超详细教程,含computed、watch、组件通信、模版引用......
    前言:哈喽,大家好,我是前端菜鸟的自我修养!今天给大家分享【Vue3的组合式API】超详细教程,包含setup语法糖、computed、watch、组件通信、模版引用、vue3新特性等等......,并提供具体代码帮助大家深入理解,彻底掌握!原创不易,如果能帮助到带大家,欢迎收藏+关注哦......
  • QianKun vue2 改造主应用 vue3+vite 改造子应用
    一:Vue2改造主应用创建方式:vuecreatevue2-master 1:在vue2项目src下撞见qiankun文件夹用于注册和启动子应用配置创建index.js创建app.js。注册。name要和子应用vite.config.js配置相同。container要和indexView中id相同创建indexView.vue。用于显示微应用......