用vue写代码，当点击一个按钮后，对应的组件才被看见，再次点击时恢复不可见。请告诉我至少要创建多少个文件才能实现

要实现该功能，你需要创建至少两个文件：

1. Vue 组件文件：用来定义按钮和对应的组件，并且实现按钮点击事件的方法。

2. 单独的组件文件：用来定义要显示的组件内容。

具体步骤如下：

1. 在 `src/components` 目录下，创建一个 Vue 组件文件，例如 `MyComponent.vue`，并且在文件中定义按钮和对应的组件：

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

    <my-sub-component v-if="isShow"></my-sub-component>
  </div>
</template>

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

export default {
  name: 'MyComponent',

  components: {
    MySubComponent
  },

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

  methods: {
    toggleComponent() {
      this.isShow = !this.isShow;
    }
  }
};
</script>

其中，`<my-sub-component>` 是一个自定义的标签，它会被渲染为 `MySubComponent` 组件。`v-if` 指令会根据 `isShow` 的值来控制组件的显示和隐藏，`toggleComponent` 方法会在用户点击按钮时被调用，从而切换 `isShow` 的值。

2. 在 `src/components` 目录下，创建一个单独的组件文件 `MySubComponent.vue`，用来定义要显示的组件内容：

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

<script>
export default {
  name: 'MySubComponent'
};
</script>

这里我们只是简单地定义了一个空的组件，你可以根据需求来定义实际的组件内容。

3. 在 Vue 应用中，将 `MyComponent` 组件添加到页面中：

<template>
  <div id="app">
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue';

export default {
  name: 'App',

  components: {
    MyComponent
  }
};
</script>

这样就可以在页面上显示 `MyComponent` 组件了。当用户点击按钮时，对应的组件会被显示出来，再次点击时会恢复为不可见状态。