[Vue3] 如何注册和使用全局方法(setup 语法糖中)

注册全局方法

image.png

这是对 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>