[分享]如何调用vue方法

如何调用Vue中的方法呢？有几种方式可以实现：

// Vue实例对象调用方法
let vm = new Vue({
  methods: {
    getData() {
      // TODO 请求数据
    },
    submitForm() {
      // TODO 提交表单
    }
  }
})
vm.getData();
vm.submitForm();

// Vue组件中调用方法
export default {
  methods: {
    getData() {
      // TODO 请求数据
    },
    submitForm() {
      // TODO 提交表单
    }
  }
}
// ...
this.getData();
this.submitForm(); 

可以看出，调用Vue中的方法就是通过实例对象或组件，直接调用定义在methods属性中的方法。在Vue实例对象中，通过new Vue()创建对象后，在vm对象上直接进行调用即可。而在组件中，需要在methods属性中进行定义，并使用this关键字进行调用。

除了上述两种方式外，还有其他方式可以调用Vue方法：

// 通过$on方法绑定事件，然后在回调函数中调用方法
vm.$on('doAction', function() {
  vm.getData();
})
vm.$emit('doAction');

// 通过$refs属性获取组件实例进行调用
export default {
  methods: {
    scrollToTop() {
      // TODO 滚动到顶部
    }
  }
}
// ...
<CustomComponent ref="myComponent"></CustomComponent>
// ...
this.$refs.myComponent.scrollToTop(); 

通过$on和$emit方法实现事件传递，在回调函数中调用Vue方法，即可实现方法调用。而通过$refs属性获取组件实例，则可以直接通过组件实例进行方法调用。

综上，Vue中调用方法很简单，只需要在实例对象或组件的methods属性中进行定义，然后直接进行调用即可。还可以通过事件绑定和组件实例获取等方式实现方法调用。如果遇到多层嵌套组件中的方法调用问题，可以使用$parent或$children属性进行父子组件之间的方法调用。