一、main.js 装备齐局变质。
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
/** 界说一个函数,用于东西链式与值 */
const getObjChainingVal = (obj, keyName) => {
// ...
return tempObj
}
app.config.globalProperties.getObjChainingVal = getObjChainingVal;
/**界说变质$website,并赋值为devcursor**/
app.config.globalProperties.$website = 'devcursor';
正在其他页里应用的时辰
(1)正在模板外运用:
<template>
<div>
做者:{{ getObjChainingVal(data, 'user.info.name') }}
<div>{{ $website }}</div>
</div>
</template>
(两)正在语法糖<script setup>面利用:
<script setup>
import { getCurrentInstance } from 'vue'
const app = getCurrentInstance()
const website = app.appContext.config.globalProperties.$website
console.log(website)
// 或者者
const { proxy } = getCurrentInstance()
console.log(proxy.$website)
// 应用解构赋值
const { $web } = getCurrentInstance()!.appContext.config.globalProperties
console.log($web)
/**注重!getCurrentInstance()不克不及正在归调函数、办法面利用**/
//若要造访齐局变质,需正在函数表面挪用getCurrentInstance()
const { proxy } = getCurrentInstance()
//或者者
const name = getCurrentInstance().proxy.$website;
const getUserInfo=()=>{
console.log(proxy.$website);
console.log(name);
}
</script>
(3)组件真例外应用
<script>
export default {
mounted() {
console.log(this.$website) // 'devcursor'
}
}
</script>
两、利用provide界说变质、inject猎取变质
(1)女组件运用provide界说变质
import {provide} from "vue";
const data='hello Word';
provide('data',data);
(二)子组件经由过程inject猎取变质
import {inject} from "vue";
const data=inject('data');
console.log(data,'555555555555555555555'); //输入为:hello Word
附:界说齐局函数Vue二 以及 Vue3 的区别
因为 Vue3 不 Prototype 属性,以是必要正在 main.ts 文件面应用 app.config.globalProperties 往界说齐局函数以及变质
Vue二:
// 以前 (Vue 两.x)
Vue.prototype.$http = () => {}
Vue3:
// 以后 (Vue 3.x)
const app = createApp({})
app.config.globalProperties.$http = () => {}
界说一个齐局变质,事例如高:
app.config.globalProperties.$env = "dev";
正在 Vue3 移除了了过滤器,界说一个齐局函数包揽 Filters,事例如高:
app.config.globalProperties.$filters = {
format<T extends any>(str: T): string {
return `衔蝉-${str}`;
}
}
总结
到此那篇闭于Vue3界说齐局变质的体式格局总结的文章便引见到那了,更多相闭Vue3界说齐局变质形式请搜刮剧本之野之前的文章或者持续涉猎上面的相闭文章心愿巨匠之后多多支撑剧本之野!
发表评论 取消回复