一蹬碧、存儲數(shù)據(jù)文件
當(dāng)前操作的數(shù)據(jù)在刷新或關(guān)閉瀏覽器之后，需要數(shù)據(jù)還是當(dāng)前的數(shù)據(jù)履恩，就要緩存數(shù)據(jù)锰茉。
存儲有兩方面：1.緩存在內(nèi)存。2.緩存為文件切心。
存在內(nèi)存的話瀏覽器關(guān)閉后會沒有飒筑，而文件不會
localStorage本地存儲，存儲為文件绽昏。
存儲需要知道存的什么東西协屡？什么時候存？什么時候讀全谤？
1).存界面想要展示的數(shù)據(jù)
2).只要界面的數(shù)據(jù)發(fā)生了改變時刻存肤晓。（比如刪除、添加、修改等等）
3).一上來顯示就要讀补憾，一打開就要讀
data () {
return {
//從localStorage讀取數(shù)據(jù)
todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]')
//localStorage存的時候以一個key對應(yīng)一個value的形式存的漫萄，而且存的是文本字符串，拿到數(shù)據(jù)后要轉(zhuǎn)換為數(shù)組盈匾，沒有值就解析'[]'
}
}
當(dāng)數(shù)據(jù)發(fā)生改變就需要存儲腾务，需要用到深度監(jiān)視，監(jiān)視數(shù)據(jù)的改變削饵。為什么需要深度監(jiān)視呢岩瘦？因為只要內(nèi)部發(fā)生變化都可以知道，而一般監(jiān)視只能監(jiān)視最外層窿撬。
watch: {
todos: {
deep: true,
handler: function(newValue, oldValue) {
//將todos最新值的json格式字符串启昧，保存到localStorage里。todos_key是鍵劈伴，鍵可以隨便命名密末，但存的鍵和取的鍵名字一定要一致，存的值也必須是轉(zhuǎn)換為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)
}
}
}
子組件里接收父組件傳過來的數(shù)據(jù)與方法
export default{
props:{
data: Array,
addClick: Function
},
methods:{
addItem(){
let obj={c:3}
this.addClick(obj)
}
}
}
2、vue的自定義事件
自定義事件有兩方面：1.父組件綁定監(jiān)聽赡模。2.子組件觸發(fā)（分發(fā)）事件田炭。
綁定監(jiān)聽有兩種方法：
方法一：
//父組件
<div>
//給CommentHead組件綁定addClick事件監(jiān)聽
<CommentHead @addClick='addClick'></CommentHead>
</div>
methods:{
addClick(obj){
this.data=this.data.push(obj)
}
}
//子組件
methods:{
addItem(){
let obj={c:3}
this.$emit('addClick', obj) //子組件觸發(fā)事件回調(diào)
}
}
方法二：
//父組件
<div>
<CommentHead ref='head'></CommentHead>
</div>
export default{
methods:{
addClick(obj){
this.data=this.data.push(obj)
}
},
mounted(){
//給CommentHead組件綁定事件監(jiān)聽
this.$refs.head.$on('addClick', this.addClick)
}
}
//子組件
methods:{
addItem(){
let obj={c:3}
this.$emit('addClick', obj) //子組件觸發(fā)事件回調(diào)
}
}
自定義事件專門用于父子組件之間傳遞，用來代替函數(shù)屬性漓柑。不適合父組件里有子組件教硫，子組件里還有子組件的這種多層嵌套。
3辆布、slot插槽（占位）
用于父組件像子組件傳遞標(biāo)簽數(shù)據(jù)瞬矩。
//子組件
<template>
<div>
<slot name='head'>不確定的標(biāo)簽結(jié)構(gòu)1</slot>
<slot name='content'>不確定的標(biāo)簽結(jié)構(gòu)2</slot>
</div>
</template>
//name屬性表示占位之間的唯一標(biāo)識名字
//父組件
<div>
//引入子組件
<child>
<div>
<div slot='head'>head對應(yīng)的標(biāo)簽數(shù)據(jù)</div>
<div slot='content'>content對應(yīng)的標(biāo)簽數(shù)據(jù)</div>
</div>
</child>
</div>
