一、存储数据文件
当前操作的数据在刷新或关闭浏览器之后，需要数据还是当前的数据，就要缓存数据。
存储有两方面：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>
