用vue写代码，当点击一个按钮后，对应的组件才被看见，再次点击时恢复不可见

你可以使用 Vue 中的 `v-if` 指令和 `methods` 方法来实现该功能。具体步骤如下：

1. 定义一个 boolean 类型的数据，用来控制组件的显示和隐藏。例如：

data() {
  return {
    isShow: false
  };
}

2. 在模板中，使用 `v-if` 指令来控制组件的显示和隐藏：

<template>
  <div>
    <button @click="toggleComponent">点击我</button>

    <div v-if="isShow">
      <!-- 组件内容 -->
    </div>
  </div>
</template>

3. 定义一个 `toggleComponent` 方法，用来切换 `isShow` 的值，从而控制组件的显示和隐藏：

methods: {
  toggleComponent() {
    this.isShow = !this.isShow;
  }
}

这样，当用户点击按钮时，`toggleComponent` 方法会被调用，`isShow` 的值会被取反，从而控制组件的显示和隐藏。当再次点击按钮时，组件会恢复为不可见状态。

需要注意的是，如果你使用了 `v-if` 指令来控制组件的显示和隐藏，那么在组件不可见的时候，它不会被渲染到 DOM 中，因此在组件可见和不可见之间切换时，组件的状态会被重置。如果你希望在组件可见和不可见之间保留组件的状态，可以考虑使用 `v-show` 指令来控制组件的显示和隐藏。