vue3 全局函数传参
时间: 2023-10-06 18:04:51 浏览: 219
在 Vue 3 中,你可以使用 `app.config.globalProperties` 来定义全局函数,并且可以在整个应用程序中访问这些函数。
要传递参数给全局函数,你可以使用闭包或者使用一个工厂函数来创建一个带有参数的全局函数。
以下是使用闭包的示例:
```javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 定义全局函数
app.config.globalProperties.myGlobalFunction = (param) => {
console.log('参数:', param);
};
app.mount('#app');
```
在应用程序的任何组件中,你都可以直接调用 `myGlobalFunction` 并传递参数:
```javascript
// MyComponent.vue
export default {
mounted() {
// 调用全局函数并传递参数
this.$root.myGlobalFunction('Hello');
},
};
```
使用工厂函数的示例:
```javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 定义带有参数的全局函数的工厂函数
const createMyGlobalFunction = (param) => {
return () => {
console.log('参数:', param);
};
};
// 创建带有参数的全局函数
app.config.globalProperties.myGlobalFunction = createMyGlobalFunction('Hello');
app.mount('#app');
```
同样,在应用程序的任何组件中,你可以直接调用 `myGlobalFunction`:
```javascript
// MyComponent.vue
export default {
mounted() {
// 调用全局函数
this.$root.myGlobalFunction();
},
};
```
这样,你就可以在 Vue 3 中传递参数给全局函数了。
阅读全文