1. 需求分析
可以通过点击标题进行隐藏\显示折叠内容
可以动态嵌入输入内容，输入内容可为文本可谓HTML文本
需要有收起展开过渡动画
拥有两种模式，一种最多只能打开一个，一种可以打开多个
需要进行双向绑定
2. 编码实现
2.1. 组件结构
2.2. 总体思路
动态嵌入HTML需要使用插槽，分为head和content，进行不同部分的插入，需要使用具名插槽。过渡动画需要使用vue提供的组件transition进行包裹，同时设置对应的css样式，折叠展开动画使用slide较好。需要设计一对组件Collapse内含多个CollapseItem，实现展开、折叠交互需要使用emit方法。父组件需要管理激活记录，需要维护一个激活数组，同时提供点击方法，规定激活的业务流程。子组件需要获取激活状态、激活方法，父组件通过provide提供激活方法和激活状态，子组件通过inject注入属性。实现双向绑定和激活交互。
2.3. 动态嵌入HTML实现
模板设置具名slot，父组件通过<template #name>指定插入插槽
2.4. 过渡动画实现
通过引用过渡动画钩子，每个阶段设置对应的展开收起样式
2.5. 双向绑定和交互实现
props从外部获取参数，定义交互方法，若为手风琴模式，则保证数组中只有一个元素，若重复点击一个元素则将其删除。
外部双向绑定数据v-model根据vue的v-model描述，其为如图简写。变为props传入searchtext和绑定更新事件update:modelValue。
需要注意，使用watch监听props的值，不然异步变化无法响应。
通过privide提供交互方法和激活数组
子组件注入对应属性方法进行激活
