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