Uniapp全局引入(mixin)

发布时间 2023-12-05 12:27:19作者: 窦戈

全局引入

要在 UniApp 中创建一个全局方法,以便在所有模板中直接使用,可以使用 Vue 的 mixin 混入功能。

下面是创建全局方法的步骤:

  1. 在项目的根目录下,创建一个名为 mixin.js 的文件(或者你可以选择其他命名)。
  2. mixin.js 文件中,定义全局方法。例如,我们创建一个名为 globalMethod 的全局方法。
    const globalMethod = {
      methods: {
        // 这里是你的全局方法的定义
        sayHello() {
          console.log('Hello, UniApp!');
        },
        // 其他全局方法...
      }
    };
    
    export default globalMethod;
    ```
    
  3. main.js 文件中,引入并注册 mixin.js 中的全局方法。
    import Vue from 'vue';
    import App from './App';
    import globalMethod from './mixin.js';
    
    Vue.mixin(globalMethod);
    
    const app = new Vue({
      ...App
    });
    app.$mount();
    ```
    
    

现在,你可以在任何模板中直接调用 globalMethod 中定义的全局方法了。例如,在任何页面或组件的模板中使用 sayHello 方法:

<template>
  <view>
    <button @click="sayHello">Say Hello</button>
  </view>
</template>

通过上述步骤,你可以在 UniApp 中创建一个全局方法,并在所有模板中直接使用。请确保在需要使用全局方法的页面或组件中,引入了 mixin.js 文件。

注意:全局方法是在 Vue 实例中定义的,因此它们可以在组件的模板中直接使用,但不能在组件的 JavaScript 代码中直接使用。如果你需要在组件的 JavaScript 代码中使用全局方法,可以通过 this 访问全局方法,如 this.sayHello()