6.1 收集四个组件的value

子组件的数据要汇集到父组件上

外面的数据由外面的vue控制, 包括初始值, 里面的Vue只是只读就行了.

//监听
//money.vue
<template>
  <Layout class-prefix="layout">
    <NumberPad />
    <Types />
    <Notes />
    <Tags :data-source.sync="tags" @xxx="yyy" />//监听
  </Layout>
</template>

<script lang="ts">
@Component({
  components: { Tags, Notes, Types, NumberPad },
})
export default class Money extends Vue {
  tags = ["衣", "食", "住", "行", "彩票"];
  recordList: Record[] = recordList;
  record: Record = {
    tags: [],
    notes: "",
    type: "-",
    amount: 0,
  };
 yyy(zzz: string[]) {
    console.log(zzz)
  }
  </script>

//Tags.vue
  create() {
    const name = window.prompt("请输入标签名");
    if (name === "") {
      window.alert("标签名不能为空");
    } else if (this.dataSource) {
      this.$emit(event:xxx, this.selectedTags);
    }
  }

监听成功

监听四个组件

    <NumberPad/>
    <Types />
    <Notes />
    <Tags />
    

watch 变化时才触发

监听并拿到这些值，记录起来 申明一个记录

//money.vue
  type Record = {
    tags: string[]
    notes: string
    type: string
    amount: number // 数据类型 object | string
    createdAt?: Date  // 类 / 构造函数
  }

6.2 使用.sync

6.3 使用LocalStorage

现在前端做数据存储，跨页面传值，localStorage是一个很好的方式，以键值对的方式存储，也方便取值赋值，下面说一说使用方法和一些常见的使用技巧。

1.存值共有3种方式，localStorage相当于window对象下面的一个属性，所以有[]和.调用，但也具有自身的setItem方法

// 自身方法 localStorage.setItem("name","bonly");
// []方法 localStorage["name"]="bonly"; 
// .方法 localStorage.name="bonly";

2.取值也是如此，自身的方法是getItem

// 自身方法 localStorage.getItem("name"); 
// []方法 localStorage["name"]; 
// .方法 localStorage.name;

3.改变的方式，就是相当于给对应的key重新赋值，就会把原来的值覆盖掉

// 自身方法 localStorage.setItem("name","TOM"); 
// []方法 localStorage["name"]="TOM";
// .方法 localStorage.name="TOM";

4.移除某一个值，可以通过对象删除属性的关键字delete也可以用自身的方法removeItem

// 自身方法 localStorage.removeItem("name");
// []方法 delete localStorage["name"];
// .方法 delete localStorage.name

5.获取所有的key

// 通过自身的key
for (var i=0;i<localStorage.length;i++) {
    console.log(localStorage.key(i));
}
// 通过for in 循环获取
for(var key in localStorage){
    console.log(key);
}

6.获取所有的值

localStorage.valueOf(); //取出所有的值

7.清除所有的值

localStorage.clear()

8.判断是否具有某个key，hasOwnProperty方法

localStorage.hasOwnProperty("name") 
// 如果存在的话返回true，不存在返回false

9.注意事项
1.localStorage特定于页面的协议，不是同一域名，不能访问。
2.有长度限制，5M左右，不同浏览器大小会有不同。
3.生命周期是永久的，但是数据实际是存在浏览器的文件夹下，可能卸载浏览器就会删除。
4.浏览器可以设置是否可以访问数据，如果设置不允许会访问失败。
5.兼容IE8以上浏览器
6.只能存储字符串类型，需要转成字符串存储。

10.使用技巧
1.先判断浏览器是否支持localStorage，通过if(!window.localStorage) return;
2.单词太长，不方便书写，可以利用 var storage=window.localStorage;
3.字符串和原始类型需要通过JSON.stringfy转字符串，通过JSON.parse转成对象
4.通过封装方法实现来回转化

6.4 数据迁移策略