下面是示例代码：

复制
1<template>
2  <div>
3    <button @click="toggleCollapse">
4      {{ collapsed ? '展开' : '折叠' }}
5    </button>
6    <div v-show="!collapsed">
7      <slot></slot>
8    </div>
9  </div>
10</template>
11
12<script>
13export default {
14  model: {
15    prop: 'collapsed',
16    event: 'toggle',
17  },
18  props: {
19    collapsed: {
20      type: Boolean,
21      default: true,
22    },
23  },
24  methods: {
25    toggleCollapse() {
26      this.$emit('toggle', !this.collapsed);
27    },
28  },
29};
30</script>

此组件包含一个按钮，根据collapsed属性的值显示"折叠"或"展开"文本。在按钮的click事件中，调用toggleCollapse方法来切换collapsed的状态，并通过自定义事件toggle将新的状态传递给父组件。

组件内部有一个v-show指令，根据collapsed属性的值决定是否显示插槽内容。当collapsed为true时，插槽内容将被隐藏；当collapsed为false时，插槽内容将显示出来。

在使用该组件时，可以使用v-model来进行双向绑定：

复制
1<template>
2  <div>
3    <collapse-panel v-model="isCollapsed">
4      <!-- 插入要折叠展开的内容 -->
5      <p>这是要折叠展开的内容</p>
6    </collapse-panel>
7  </div>
8</template>
9
10<script>
11import CollapsePanel from '@/components/CollapsePanel.vue';
12
13export default {
14  components: {
15    CollapsePanel,
16  },
17  data() {
18    return {
19      isCollapsed: true,
20    };
21  },
22};
23</script>

此外，将isCollapsed属性绑定到v-model指令上，以实现双向绑定。通过控制isCollapsed的值，可以折叠或展开插槽内的内容。