从父vue组件上的按钮调用子方法

从父Vue组件上的按钮调用子方法是通过子组件的引用来实现的。可以使用Vue中的ref属性来获取子组件的引用，在父组件中通过这个引用来调用子组件的方法。

具体步骤如下：

在子组件中定义需要被调用的方法。假设子组件名为ChildComponent，在ChildComponent组件中定义一个方法childMethod：

<template>
  <div>
    <!-- 子组件内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      // 子组件的方法逻辑
    }
  }
}
</script>

在父组件中引入子组件，并使用ref属性获取子组件的引用。假设父组件名为ParentComponent：

<template>
  <div>
    <!-- 父组件内容 -->
    <ChildComponent ref="childRef"></ChildComponent>
    <button @click="callChildMethod">调用子方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      // 通过子组件引用调用子组件的方法
      this.$refs.childRef.childMethod();
    }
  }
}
</script>

在上述代码中，通过ref属性给子组件起了一个名字childRef，然后在父组件的方法callChildMethod中通过this.$refs.childRef来获取子组件的引用，并调用子组件的childMethod方法。

这样，当父组件中的按钮被点击时，就会调用子组件的方法。

关于Vue组件通信和ref属性的更多信息，可以参考腾讯云的文档：