vue3挂载window方法
时间: 2023-07-09 08:39:06 浏览: 187
在Vue 3中,可以通过在 `main.js` 文件中定义全局方法来挂载到 `window` 对象上。具体步骤如下:
1. 在 `main.js` 文件中定义一个全局方法,例如:
```
const myGlobalMethod = () => {
console.log('This is my global method!');
};
```
2. 在 `createApp` 方法中使用 `provide` 和 `inject` 钩子函数将该方法注入到全局上下文中,例如:
```
import { createApp } from 'vue';
const app = createApp(App);
app.provide('myGlobalMethod', myGlobalMethod);
app.inject('myGlobalMethod'); // 可选
app.mount('#app');
```
3. 在需要使用该全局方法的组件中,可以通过 `inject` 钩子函数将其注入到组件实例中,例如:
```
import { defineComponent, inject } from 'vue';
export default defineComponent({
setup() {
const myGlobalMethod = inject('myGlobalMethod');
// 在组件中使用该全局方法
myGlobalMethod();
},
});
```
4. 最后,在 `index.html` 文件中可以通过 `window` 对象访问该全局方法,例如:
```
<button onclick="window.myGlobalMethod()">Click me!</button>
```
这样,就完成了将一个全局方法挂载到 `window` 对象上的操作。