编写一个vue组件，组件内部使用插槽接收外部内容，v-model双向绑定，实现折叠展开的功能

下面是示例代码：

<template>
  <div>
    <button @click="toggleCollapse">
      {{ collapsed ? '展开' : '折叠' }}
    </button>
    <div v-show="!collapsed">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'collapsed',
    event: 'toggle',
  },
  props: {
    collapsed: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    toggleCollapse() {
      this.$emit('toggle', !this.collapsed);
    },
  },
};
</script>

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

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

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

<template>
  <div>
    <collapse-panel v-model="isCollapsed">
      <!-- 插入要折叠展开的内容 -->
      <p>这是要折叠展开的内容</p>
    </collapse-panel>
  </div>
</template>

<script>
import CollapsePanel from '@/components/CollapsePanel.vue';

export default {
  components: {
    CollapsePanel,
  },
  data() {
    return {
      isCollapsed: true,
    };
  },
};
</script>

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