在Vue3中使用全局的函数

在Vue3中使用全局的函数

1、新建1个js文件，包含所需要注册的函数

//src/assets/func.js
export function http() {
    alert("http")
}

export function https() {
    alert("https")
}

使用export将两个函数暴露出去

2、注册到vue3中

//src/mAIn.js
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 第一步：这个位置就是引入js文件
import * as func from '@/assets/func'
let app = createApp(App)
// 第二步：在app中全局注册方法，其中$func就是调用的方法名
app.config.globalProperties.$func = func
app.use(store)
app.use(router)
app.mount('#app')

3、在vue文件中使用

//src/views/HomeView.vue
<template>
  <div class="home">
    <h1>HomeView.vue </h1>
  </div>
  <HelloWorld msg="hello vue"></HelloWorld>
  <button @click="click1">func</button>
// 也可以这样使用刚刚定义的函数
  <button @click="$func.https()">func</button>
</template>

<script>
// @ is an alias to /src

import HelloWorld from "@/components/HelloWorld";

export default {
  name: 'HomeView',
  data() {
    return {}
  },
  methods: {
    click1() {
      // 这个位置就是使用刚刚自定义的函数
      this.$func.https()
    }
  },
  components: {HelloWorld},
}
</script>