vue怎么调用组件方法

// 父组件
<template>
  <ChildComponent ref="child" />
</template>

<script>
  export default {
    methods: {
      callChildMethod() {
        this.$refs.child.childMethod(); // 直接调用子组件中的 childMethod 方法
      }
    }
  }
</script>

// 父组件
<template>
  <ChildComponent @trigger-method="callChildMethod" />
</template>

<script>
  export default {
    methods: {
      callChildMethod(payload) {
        // 接收 childMethod 方法传递的 payload
      }
    }
  }
</script>

// 子组件
<template>
  <button @click="childMethod">触发方法</button>
</template>

<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('trigger-method', { payload: '数据' }); // 发送事件触发父组件中的方法
      }
    }
  }
</script>

// 父组件
<template>
  <ChildComponent />
</template>

<script>
  export default {
    provide() {
      return {
        callChildMethod: this.callChildMethod
      }
    },
    methods: {
      callChildMethod() {
        // ...
      }
    }
  }
</script>

// 子组件
<template>
  <GrandChildComponent />
</template>

<script>
  export default {
    inject: ['callChildMethod'],
    methods: {
      callParentMethod() {
        this.callChildMethod(); // 通过 provide 注入的方法调用父组件中的方法
      }
    }
  }
</script>