vue3 第二十三节(全局属性方法应用)

vue2 与 vue3 的全局属性使用方法区别 1、globalProperties getcurrentinstace vue3 中已经移除对外暴露 getcurrentinstace,建议使用下面两种 2、provide | inject 3、mitt 事件总线程

1、vue2 通过 prototype 实例上挂载属性/方法,用于全局调用

javascript 复制代码
// main.js
import Vue from 'vue'
import App from './App.vue'
Vue.prototype.$message = '测试'
Vue.mount('#app',App')
javascript 复制代码
// 使用
methods:{
  test(){
    // 直接通过 this.$message 即可实现调用
    console.log(this.$message)
  }
}

2、vue3 中建议通过 provide | inject 挂载全局属性/方法

javascript 复制代码
// main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.config.globalProperties.$message = '测试' // 这种方案vue3中已不建议使用
app.provide('message', '测试')
app.mount('#app')

3.1、通过 provide | inject 挂载全局属性/方法 建议使用

main.ts 中 通过全局依赖,如:app.provide('message', '测试') 这样即可在组件中通过 inject 获取到全局属性;

javascript 复制代码
<script setup>
const message = inject('message')
console.log(message) // 测试
</script>

更多关于provide() | inject() 的应用请查看组件之间通讯

3.2、通过globalProperties 挂载全局属性/方法 不建议使用

该属性发现在 vue3 的api文档中已经无法搜索到,已被隐藏,不建议使用app.config.globalProperties定义的全局变量不支持双向绑定,只是声明了一个全局的变量

javascript 复制代码
// main.ts
app.config.globalProperties.$message = '测试'
javascript 复制代码
使用时
<script setup>
import { getcurrentInstance } from 'vue'
getcurrentInstance.appContext.config.globalProperties.$message // 测试
</script>

3.3、事件总线 mitt() 不建议使用

javascript 复制代码
 yarn add mitt
javascript 复制代码
 // main.ts
 import mitt from "mitt"
 const Mitt = mitt()
 // 声明
 declare module 'vue'{
  export interface ComponentCustomProperties{
    $Bus: typeof Mitt
  }
}
 app.config.globalProperties.$Bus = Mitt

使用时候 使用emit()派发事件 on()接受事件 off()事件移除 clear()情况所有

javascript 复制代码
<script setup>
import {getCurrentInstance} from "vue"
const instance = getCurrentInstance().appContext.config.globalProperties
// 派发事件
instance.proxy.$Bus.emit("on-changeParams","修改参数")
// 监听事件

instance.proxy.$Bus.on("on-changeParams",(params) => {
  console.log('--params-')
})
// 关闭事件
instance.proxy.$Bus.off("on-changeParams",(params) => {
  console.log('--params-')
})
//清空所有监听
instance.all.clear();
</script>

vue3 中 3.3版本以上 组合式 API 中建议 使用 provide() | inject() 依赖注入的方法进行全局属性方法挂载

相关推荐
我在北京coding18 分钟前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机42 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人44 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景1 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。2 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我3 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html