vue中如何定义全局方法

在 Vue 中，我们可以使用 Vue.prototype 来定义全局方法，这样一来，这些方法就可以在整个 Vue 应用中的任何组件里使用，下面，我将详细解释如何在 Vue 中定义全局方法。

在 main.js 中定义全局方法

我们需要在项目的 main.js 文件中导入 Vue,并将其挂载到一个实例上：

import Vue from 'vue';
import App from './App.vue';
new Vue({
  el: 'app',
  render: h => h(App)
});

我们可以在 Vue.prototype 上定义全局方法，我们可以定义一个名为 globalMethod 的方法：

Vue.prototype.$globalMethod = function() {
  console.log('这是一个全局方法');
};

现在，我们可以在 Vue 应用的任何组件中使用这个全局方法了，在一个名为 HelloWorld.vue 的组件中，我们可以这样使用它：

<template>
  <div>
    <button @click="callGlobalMethod">调用全局方法</button>
  </div>
</template>
<script>
export default {
  methods: {
    callGlobalMethod() {
      this.$globalMethod(); // 调用全局方法
    }
  }
};
</script>

当我们点击 "调用全局方法" 按钮时，控制台将输出 "这是一个全局方法"。

在其他组件中定义局部方法

除了全局方法之外，我们还可以在 Vue 组件中定义局部方法，局部方法只能在该组件内部使用，无法在其他组件中访问，要定义局部方法，我们只需在组件的 methods 属性中添加一个新的函数即可：

export default {
  data() {
    return {
      msg: 'Hello Vue!'
    };
  },
  methods: {
    localMethod() {
      console.log('这是一个局部方法');
    }
  }
};

现在，我们在 localMethod 这个局部方法中打印一条消息，要在组件的其他地方使用这个局部方法，我们可以使用 this.localMethod()，但是请注意，由于这是局部方法，因此它只能在这个特定的组件中使用，如果我们需要在其他组件中使用相同的功能，我们需要将其定义为全局方法。