收集四个组件的Value信息

今天的主要目的是手机页面上填写的信息，将四个不相连的板块整合在一起。

• 例如tags，我们如何知道tags被选中了呢？

获取tags的内容

• 要获取选中tags的一个功能

<Tags :data-source.sync="tags" @xxx="yyy">  
// 当触发xxx事件时，会得到yyy方法；
//在下面ts里把yyy定义一下 :
yyy(){
}

• 当选中tags会触发xxx事件，xxx事件就是一个新选的tag；
  • 在Tags.vue里面，关于选中tags的代码下面进行xxx事件的触发；触发之后，就把新选的tag，发送到yyy。 `` this.$emit(event:'xxx',this.selectedTags)

  - 就会把this.selectedTags作为参数传给yyy；让这个参数等于zzz，或者其他的任何字母打印出来都是，触发xxx，所得到的内容；
  

  yyy(zzz：string[]){ console.log(zzz) }

  ### 下面正式给他们命名
  - @xxx就是就是新选的一个tag, 命名为@update：selected；
  - yyy就是 onupdateTags；
  - 所以就变成了下面：
  

<Tags:data-source.sync="tags" @update：selected="onupdateTags"> // 当触发xxx事件时，会得到yyy方法； //在下面ts里把yyy定义一下 : this.$emit(event:'xxx',this.selectedTags) onupdateTags(tags:string[]){ console.log(tags); //打印出来的就是 }

### 获取Notes的内容
- 这个很简单了，

<Notes @update:value="onUpdateNotes"/> onUpdateNotes(notes:string){ console.log(notes); }

### 获取types的内容

<Types @update:value="onUpdateTypes"/> onUpdateType(type:string){ console.log(type) }

### 获取NumberPad的内容

onUpdateAmount(value:string){ console.log(value) } ``` ### 下面是触发过程的 ``` ---------------------下面是触发的过程 this.$emit(event:'update：value',this.selectedTags) ------------- Vue { value = ''; @Watch('value') //watch监督value=''这个字符串； onValueChanged(value: string) { this.$emit('update:value', value); } } ---------------- @Watch('type') //watch监督value=''这个字符串； onTypeChanged(value: string) { this.$emit('update:value', type); ------------ ok() { this.$emit('update:value', this.output);} ``` ### 方面统一，都改成value ```

onupdateTags(value:string[]){ console.log(value); }

onUpdateNotes(value:string){ console.log(value); }

onUpdateType(value:string){ console.log(value) }

onUpdateAmount(value:string){ console.log(value) }

## 把收集的值，变成一个对象，搞一个记录
- 声明一个记录，ts用type，js用var，type比较在乎的是类型：

type Record = { tags: string[] notes: string type: string amount: number }

- 下面用record进行操作

record: Record = {tags:[ ],notes: '',type:'-',amount:0};//给他们一个默认值 就对应的把console.log（）里面的值，变成 this.record.tags=value this.record.notes=value this.record.type=value this.record.amount= parseFloat(value);//把字符串变成number

### 关于type的默认类型的
- 所以这个默认的type类型一定是外界传过来的；
`<Types :value = "record.type" @update:value="onUpdateTypes">`
- type='-';这个默认为“-”的就不需要了；