vue项目引入自定义组件，怎么控制该组件的显示与隐藏，请举例

在 Vue 项目中，可以使用 v-if 或 v-show 来控制组件的显示与隐藏。

下面是一个简单的示例，假设我们有一个名为 MyComponent 的自定义组件，我们想根据某些条件来控制它的显示与隐藏。

1. 使用 v-if 控制组件的显示与隐藏

在模板中使用 v-if 来控制 MyComponent 组件的显示与隐藏：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <my-component v-if="showComponent"></my-component>
  </div>
</template>

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

export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      showComponent: false,
    };
  },
  methods: {
    toggleComponent() {
      this.showComponent = !this.showComponent;
    },
  },
};
</script>

在上面的示例中，我们使用 v-if 指令来控制 MyComponent 组件的显示与隐藏。showComponent 变量控制组件的显示状态，当 showComponent 为 true 时，组件显示；当 showComponent 为 false 时，组件隐藏。

2. 使用 v-show 控制组件的显示与隐藏

在模板中使用 v-show 来控制 MyComponent 组件的显示与隐藏：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <my-component v-show="showComponent"></my-component>
  </div>
</template>

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

export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      showComponent: false,
    };
  },
  methods: {
    toggleComponent() {
      this.showComponent = !this.showComponent;
    },
  },
};
</script>

在上面的示例中，我们使用 v-show 指令来控制 MyComponent 组件的显示与隐藏。showComponent 变量控制组件的显示状态，当 showComponent 为 true 时，组件显示；当 showComponent 为 false 时，组件隐藏。

需要注意的是，v-if 和 v-show 的区别在于，v-if 是将组件从 DOM 中移除，而 v-show 则是将组件的 display 样式设置为 none。因此，在组件需要频繁切换显示与隐藏时，建议使用 v-show，因为它不会频繁地添加和移除 DOM 元素。