vue学习篇2之数据存储与组件间通信

一、存储数据文件

当前操作的数据在刷新或关闭浏览器之后，需要数据还是当前的数据，就要缓存数据。
存储有两方面：1.缓存在内存。2.缓存为文件。
存在内存的话浏览器关闭后会没有，而文件不会
localStorage本地存储，存储为文件。
存储需要知道存的什么东西？什么时候存？什么时候读？
1).存界面想要展示的数据
2).只要界面的数据发生了改变时刻存。（比如删除、添加、修改等等）
3).一上来显示就要读，一打开就要读

data () {
  return {
    //从localStorage读取数据
    todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]')
    //localStorage存的时候以一个key对应一个value的形式存的，而且存的是文本字符串，拿到数据后要转换为数组，没有值就解析'[]'
  }
}

当数据发生改变就需要存储，需要用到深度监视，监视数据的改变。为什么需要深度监视呢？因为只要内部发生变化都可以知道，而一般监视只能监视最外层。

watch: {
  todos: {
    deep: true,
    handler: function(newValue, oldValue) {
      //将todos最新值的json格式字符串，保存到localStorage里。todos_key是键，键可以随便命名，但存的键和取的键名字一定要一致，存的值也必须是转换为json字符串
      window.localStorage.setItem('todos_key', JSON.stringify(newValue))
    }
  }
}

二、组件间通信

1、props
父组件

<div>
 //引入的子组件
  <CommentHead :data='data' :addClick='addClick'></CommentHead>
</div>
export default{
  data () {
    return {
      data: [{a: 1}, {b: 2}]
    }
  },
  methods: {
    addClick(obj){
      this.data=this.data.push(obj)
    }
  }
}

子组件里接收父组件传过来的数据与方法

export default{
  props:{
    data: Array,
    addClick: Function
  },
  methods:{
    addItem(){
      let obj={c:3}
      this.addClick(obj)
    }
  }
}

2、vue的自定义事件
自定义事件有两方面：1.父组件绑定监听。2.子组件触发（分发）事件。
绑定监听有两种方法：
方法一：

//父组件
<div>
  //给CommentHead组件绑定addClick事件监听
  <CommentHead @addClick='addClick'></CommentHead>
</div>

methods:{
  addClick(obj){
    this.data=this.data.push(obj)
  }
}


//子组件
methods:{
  addItem(){
    let obj={c:3}
    this.$emit('addClick', obj)  //子组件触发事件回调
  }
}

方法二：

//父组件
<div>
  <CommentHead ref='head'></CommentHead>
</div>

export default{
  methods:{
    addClick(obj){
      this.data=this.data.push(obj)
    }
  },
  mounted(){
    //给CommentHead组件绑定事件监听
    this.$refs.head.$on('addClick', this.addClick)
  }
}

//子组件
methods:{
  addItem(){
    let obj={c:3}
    this.$emit('addClick', obj)  //子组件触发事件回调
  }
}

自定义事件专门用于父子组件之间传递，用来代替函数属性。不适合父组件里有子组件，子组件里还有子组件的这种多层嵌套。

3、slot插槽（占位）
用于父组件像子组件传递标签数据。

//子组件
<template>
  <div>
    <slot name='head'>不确定的标签结构1</slot>
    <slot name='content'>不确定的标签结构2</slot>
  </div>
</template>
//name属性表示占位之间的唯一标识名字

//父组件
<div>
  //引入子组件
  <child>
    <div>
      <div slot='head'>head对应的标签数据</div>
      <div slot='content'>content对应的标签数据</div>
    </div>
  </child>
</div>