vue3 如何用use写一个全局的方法
时间: 2024-01-26 15:05:00 浏览: 73
vue-event-handler-VueJS的事件处理插件。-Vue.js开发
可以使用 `provide` 和 `inject` 来实现全局方法的注入和获取。
首先,在你的 `main.js` 中,使用 `provide` 注入一个方法。例如:
```javascript
import { createApp, provide } from 'vue'
import App from './App.vue'
const app = createApp(App)
provide('myGlobalMethod', () => {
console.log('This is a global method')
})
app.mount('#app')
```
在组件中,使用 `inject` 获取这个全局方法。例如:
```html
<template>
<button @click="myGlobalMethod()">Click me</button>
</template>
<script>
import { inject } from 'vue'
export default {
setup() {
const myGlobalMethod = inject('myGlobalMethod')
return {
myGlobalMethod,
}
},
}
</script>
```
这样,当用户点击按钮时,就会触发全局方法的执行。
需要注意的是,在 `setup` 函数中使用 `inject` 获取全局方法时,需要将它声明为 `const`,并使用对象解构来获取。这是因为 `inject` 返回的是一个响应式对象,如果直接在模板中使用,会引起不必要的更新。
阅读全文