小知识
indexOf()查找一个数值在不在当前数组中，若在就返回第一次该数值出现的索引，否则返回-1。 arr.indexOf(2) //0 arr.indexOf(3) //-1
splice： 参数（开始项的下标，剪切长度，剪切以后最后一位开始添加数据）
Tags模块数组
外部传来的tags数据
Tags分为两种，未选中和已选中：
tags = [ ];,tags是一个数组，但是tags是一个字符串数组该如何表示？
tags :string[]=[];,tags是一个字符串数组，目前是一个空数组；
selectedTags: string[]=[];,已被选中的数组也是字符串数组,默认是一个空数组;
tags是外部传来的数组：@Prop() tags :string[]=[];
因为tags是外部传来的数据，所以没有默认值。有可能给值，有可能是空的。@Prop() tags :string[] | undefined;
在外部准备赋值时<Tags tags=""/>,发现两个都是tags，有点重复了，所以把tags改成dataSource,代表意思就是一开始的数据源，外部输入的最开始的数据；
所以变成了，@Prop() dataSource :string[] | undefined;
外部就是
<Tags:data-source="tags"/>---------------------tags:['衣'，'食','住','行']
在内部渲染tags：遍历datasource也就是tags里面的内容，并显示在{{tag}}里面，用v-for，就得加个key。 <li v-for="tag in dataSource" ：key=“tag”>{{tag}}</li>
这样tags的内容“衣食住行”就会显示在页面上。
已选中的数据
selectedTags: string[]=[];,已被选中的数组也是字符串数组,默认是一个空数组;
点击哪个就是选中哪个；在li上添加一个click；
`<liv-for="tagindataSource"：key=“tag”@click="select(tag)">{{tag}}</li>`select如何实现 ？给select一个tag，就把这个tag放到专门存放已选中的的数组里。
select(tag；string){this.selectedTags.push(tag)//把这个tag放到selectedTags里面。}在li里面，如果tag在selectedTags里面，那么这个tag就是被选中的； :class={selected:selectedTags.indexOf(tag)>=0}
在CSS里面给selected加样式，则选中时，就会体现那个样式。 &.selected{ background:darken($bg,50%);}
再次点击时，就取消选中该如何表达？
先绑定一个点击事件； <button @click="create">新增标签</button>
create,如何创建呢，在ts内声明方法；
create(){constname=window.prompt(message:'请输入标签名')；}创建之后，把他放到datasource里面
create(){constname=window.prompt('请输入标签名');if(name===''){window.alert('标签名不能为空');}elseif(this.dataSource){//如果这个datasource存在；this.$emit('update:dataSource',[...this.dataSource,name]);}}解析：如果标签名不为空，就像外部发送一个更新datasource的请求，并在datasource后面，添加新增的name。
在tags上加一个.sync，就会把传的这个数组[...this.dataSource, name]，赋值给datasource。 <Tags :data-source.sync="tags/>
如果点击时，tag在里面，那么就删掉，就是回到未选中的状态；
如果tag不在里面就是添加到已选中的数组里。
constindex=this.selectedTags.indexOf(tag);//查找this.selectedTags是否有tag，若无,index=-1，若有,index>0。if(index>=0){this.selectedTags.splice(index,1);//从index的位置开始剪切，剪切1个；意思就是把这个删除,从已选中的数组中拿出去。}else{this.selectedTags.push(tag);//如果tag里面没有的话，就把它放入已选中的数组里面里面；}新增标签
当点击新增标签时，新添加标签；