编写一个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的值，可以折叠或展开插槽内的内容。