[Vue3] 如何注册和使用全局方法(setup 语法糖中)
注册全局方法
这是对 Vue 2 中 Vue.prototype
使用方式的一种替代,如果全局属性与组件自己的属性冲突,组件自己的属性将具有更高的优先级。
总之,vue3中是通过 globalProperties() 来注册全局方法的,注册全局组件方法简单粗暴,直接上代码。
const app = createSSRApp(App)
// 简单创建一个路由跳转的方法 '$goRouter'(为了命名规范一点全局的方法前面加个$)
app.config.globalProperties.$goRouter = function (path) {
uni.navigateTo({
url: path
})
}
使用全局方法(setup语法糖中)
使用分两个场景,一个是在页面中使用,一个是在js中使用
在html页面上的话也是简单粗暴的直接使用就好
<template>
<button @click="$goRouter('/pages/index/index')">
点击跳转到index页面
</button>
</template>
在script中就需要注意了,因为vue3中没有this,所以需要使用到 getCurrentInstance(),需要特别注意的是,这个方法只能在setup或生命周期中使用,其他地方使用是无效的,上代码!
<template>
<button @click="toIndex">
点击跳转到index页面
</button>
</template>
<script lang="ts" setup>
// 建议用这种方式来解构出proxy
const { proxy } = getCurrentInstance();
// 点击跳转的方法
const toIndex = () => {
proxy.$goRouter('/pages/index/index')
}
</script>
不明觉厉