【掰开揉碎】 uni-app 中的methods

在 uni-app 中，methods 是页面对象中的一个配置项，用于定义页面的方法。这个配置项包含了页面中的各种方法，可以在模板中调用，也可以在其他生命周期函数中使用。

下面详细解释一下 methods 的用法和一些注意事项：

定义 methods

在页面的 page.js 文件中，通过在 methods 对象中定义方法，可以在页面的模板中或其他地方使用这些方法。

// 在页面的 page.js 文件中

export default {
  data() {
    return {
      message: 'Hello, UniApp!',
    };
  },
  methods: {
    showMessage() {
      uni.showToast({
        title: this.message,
        icon: 'none',
      });
    },
    // 其他方法
  },
  // 其他生命周期函数和配置项
};

在模板中使用方法

在页面的模板中，可以通过 @ 或 v-on 指令来绑定方法，触发相应的事件。

<!-- 在页面的模板中 -->

<template>
  <view>
    <button @tap="showMessage">Show Message</button>
  </view>
</template>

方法中的上下文（this）

在方法中，this 指向当前页面的实例。可以通过 this 来访问页面的数据、computed 属性等。

methods: {
  showMessage() {
    console.log(this.message);
    // 在方法中使用 this 访问页面数据
  },
  // 其他方法
},

生命周期函数中使用 methods

在页面的生命周期函数中，也可以使用 this 来调用 methods 中定义的方法。

export default {
  onLoad() {
    this.showMessage();
    // 在生命周期函数中调用 methods 中的方法
  },
  methods: {
    showMessage() {
      uni.showToast({
        title: this.message,
        icon: 'none',
      });
    },
    // 其他方法
  },
  // 其他生命周期函数和配置项
};

注意事项

• methods 中定义的方法可以在模板中直接调用，但不要在模板中调用生命周期函数，因为生命周期函数不是在 methods 中定义的。
• 如果在 methods 中定义的方法需要访问 data 中的数据，可以通过 this 访问。同样，也可以访问 computed 中的计算属性。
• 可以通过 methods 中的方法来封装一些逻辑，使页面代码更加清晰和可维护。

综上所述，methods 是用于定义页面方法的配置项，通过它可以将页面逻辑组织得更加有序和结构化。在开发中，可以根据业务需要合理使用 methods 来管理页面的方法。