小知识
- 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；
`<li v-for="tag in dataSource" ：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%);} - 再次点击时，就取消选中该如何表达？
- 如果点击时，tag在里面，那么就删掉，就是回到未选中的状态；
- 如果tag不在里面就是添加到已选中的数组里。
const index = 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里面没有的话，就把它放入已选中的数组里面里面； }新增标签
- 当点击新增标签时，新添加标签；
- 先绑定一个点击事件；
<button @click="create">新增标签</button> - create,如何创建呢，在ts内声明方法；
create(){ const name= window.prompt(message:'请输入标签名')； }- 创建之后，把他放到datasource里面
create() { const name = window.prompt('请输入标签名'); if (name === '') { window.alert('标签名不能为空'); } else if (this.dataSource) { //如果这个datasource存在； this.$emit('update:dataSource', [...this.dataSource, name]); } }- 解析：如果标签名不为空，就像外部发送一个更新datasource的请求，并在datasource后面，添加新增的name。
- 在tags上加一个.sync，就会把传的这个数组
[...this.dataSource, name]，赋值给datasource。<Tags :data-source.sync="tags/>
- 先绑定一个点击事件；
