vue2 父组件按钮操作子组件方法

在Vue2中，可以通过props和事件来实现父组件按钮操作子组件的方法。

首先，你可以在父组件中定义一个按钮，并在点击按钮的时候触发一个事件。例如：

<template>
  <div>
    <button @click="handleButtonClick">点击按钮</button>
    <ChildComponent :showChild="showChild"></ChildComponent>
  </div>
</template>

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

export default {
  data() {
    return {
      showChild: false,
    };
  },
  methods: {
    handleButtonClick() {
      this.showChild = !this.showChild;
    },
  },
  components: {
    ChildComponent,
  },
};
</script>

在这个例子中，我们定义了一个名为`showChild`的数据属性，并在点击按钮的时候切换该属性的值。然后，将这个属性作为`props`传递给子组件`ChildComponent`。

接下来，在子组件中，你可以通过监听父组件传递过来的`props`的变化，在子组件中显示或隐藏自己。例如：

<template>
  <div v-if="showChild">
    子组件内容
  </div>
</template>

<script>
export default {
  props: {
    showChild: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

在子组件中，我们使用`v-if`指令来根据父组件传递过来的`showChild`值来决定是否显示子组件的内容。

这样，当你点击父组件的按钮时，子组件就会根据`showChild`的值来显示或隐藏自己。

总结起来，通过在父组件中定义一个按钮和一个数据属性，并在点击按钮的时候改变该属性的值，然后将该属性作为`props`传递给子组件，子组件根据接收到的`props`的值来显示或隐藏自己，就实现了父组件按钮操作子组件的方法。