vue怎么调用组件方法

这篇文章主要介绍了vue怎么调用组件方法的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue怎么调用组件方法文章都会有所收获，下面我们一起来看看吧。

在Vue中，组件的方法可以在组件中定义。我们可以使用Vue.extend方法定义一个组件，并在组件对象的methods属性中定义方法。例如：

var MyComponent = Vue.extend({
  methods: {
    myMethod: function () {
      // 这是一个方法代码块
    }
  }
})

我们可以通过实例化该组件对象并在实例上调用该方法来调用该组件的方法：

var componentInstance = new MyComponent()
componentInstance.myMethod()

上面的代码首先创建了一个MyComponent组件对象，然后创建一个该对象的实例componentInstance，并调用其中的myMethod方法。

我们也可以将一个组件作为另一个组件的子组件，通过父组件的引用调用子组件的方法。在Vue中，组件可以通过属性传递进行通信。父组件可以使用子组件的ref属性引用子组件实例，并直接调用其方法。示例代码如下：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue';
  
  export default {
    components: {
      'child-component': ChildComponent
    },
    methods: {
      callChildMethod: function () {
        this.$refs.child.childMethod()
      }
    }
  }
</script>

上面的代码中，父组件通过ref="child"定义子组件的引用，然后在方法callChildMethod中通过this.$refs.child引用子组件，并调用其中的childMethod方法。

当然，如果一个组件的使用方式很多，子组件调用自身方法比较麻烦。我们可以利用Vue的内置事件系统，通过自定义事件监听，将子组件需要调用的方法直接在父组件中执行。可以通过子组件的$emit方法触发自定义事件，并通过父组件的v-on指令监听自定义事件。示例代码如下：

<!-- ChildComponent.vue -->
<template>
  <div>
    <!-- 子组件中触发自定义事件 -->
    <button @click="$emit('my-event')">触发自定义事件</button>
  </div>
</template>

<script>
  export default {
    methods: {
      childMethod: function () {
        // 这是子组件的方法代码块
      }
    }
  }
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component @my-event="parentMethod"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue';
  
  export default {
    components: {
      'child-component': ChildComponent
    },
    methods: {
      parentMethod: function () {
        // 这是父组件的方法代码块
      }
    }
  }
</script>

上面的代码中，在子组件中触发自定义事件"my-event"，然后在父组件中通过v-on指令监听该事件，并将其绑定到parentMethod方法上，从而在父组件中调用子组件的方法。

以上就是vue怎么调用组件方法的详细内容，更多关于vue怎么调用组件方法的资料请关注九品源码其它相关文章！