Vue2（九）：浏览器本地存储、组件自定义事件、TodoList自定义事件
Vue2學(xué)習(xí)筆記：第九章
- 一、瀏覽器本地存儲(chǔ)（WebStorage）
- 1.相關(guān)API
- 2.一些注意點(diǎn)
- 3.TodoList中的本地存儲(chǔ)
- 二、組件自定義事件
- 1.引出組件自定義事件
- 2.怎么給組件綁定？
- （1）使用v-on
- （2）使用ref
- 3.怎么解綁？
- 4.幾個(gè)注意點(diǎn)
- 三、TodoList自定義事件
一、瀏覽器本地存儲(chǔ)（WebStorage）
存儲(chǔ)內(nèi)容大小一般支持5MB左右（不同瀏覽器可能還不一樣）
瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實(shí)現(xiàn)本地存儲(chǔ)機(jī)制。
1.相關(guān)API
（1） xxxxxStorage.setItem('key', 'value');該方法接受一個(gè)鍵和值作為參數(shù)，會(huì)把鍵值對(duì)添加到存儲(chǔ)中，如果鍵名存在，則更新其對(duì)應(yīng)的值。
（2） xxxxxStorage.getItem('person');該方法接受一個(gè)鍵名作為參數(shù)，返回鍵名對(duì)應(yīng)的值。
（3） xxxxxStorage.removeItem('key');該方法接受一個(gè)鍵名作為參數(shù)，并把該鍵名從存儲(chǔ)中刪除。
（4）xxxxxStorage.clear()該方法會(huì)清空存儲(chǔ)中的所有數(shù)據(jù)。
2.一些注意點(diǎn)
（1）SessionStorage存儲(chǔ)的內(nèi)容會(huì)隨著瀏覽器窗口關(guān)閉而消失。
（2） LocalStorage存儲(chǔ)的內(nèi)容，需要手動(dòng)清除才會(huì)消失（調(diào)用clear或者清除緩存）。
（3） xxxxxStorage.getItem(xxx)如果xxx對(duì)應(yīng)的value獲取不到，那么getItem的返回值是null。
（4）JSON.parse(null)的結(jié)果依然是null。
3.TodoList中的本地存儲(chǔ)
碉堡了兄弟們，這里面的幾個(gè)細(xì)節(jié)：
1、用watch監(jiān)視todos數(shù)據(jù)的變化，如果數(shù)據(jù)改變那么瀏覽器本地存儲(chǔ)就存?zhèn)€緩存，名字還叫todos，值是更新后的數(shù)組（要轉(zhuǎn)化為JSON字符串瀏覽器才能顯示）
2、只監(jiān)視是沒用的，如果只監(jiān)視不讀取，那么數(shù)據(jù)會(huì)緩存到瀏覽器，但是頁面刷新網(wǎng)頁不會(huì)同步，所以一定要在data中讀取瀏覽器中的數(shù)據(jù)，當(dāng)然頁面一上來可能沒有緩存（也沒添加任何數(shù)據(jù)），那么這時(shí)候JSON.parse(localStorage.getItem('todos'))就是null（這樣會(huì)報(bào)錯(cuò)的），所以再來個(gè)邏輯或，如果是null那么就todos初始化為空數(shù)組唄，然后再自己往里兒加數(shù)據(jù)，后面再刷新就會(huì)直接讀瀏覽器了（總結(jié)：初始化時(shí)如果有就讀，沒有就初始值為空數(shù)組）
3、還有，watch中要配置深度監(jiān)視deep，否則頁面刷新已經(jīng)勾選的就重置了，這是因?yàn)閣atch監(jiān)視todos只會(huì)監(jiān)視todos里面的元素，也就是每個(gè)對(duì)象的地址，但是對(duì)象屬性的變化監(jiān)測(cè)不到，但是加了deep就監(jiān)視到了
data() {return {// JSON.parse將格式完好的json字符串轉(zhuǎn)換為json對(duì)象//如果有就讀，沒有就初始值為空數(shù)組todos: JSON.parse(localStorage.getItem('todos')) || []};},JSON.stringify將Js對(duì)象或值轉(zhuǎn)換為JSON格式化的字符串
JSON.parse將格式完好的json字符串轉(zhuǎn)換為json對(duì)象
二、組件自定義事件
1、一種組件間通信的方式，適用于：子組件 ===> 父組件
2、使用場(chǎng)景：A是父組件，B是子組件，B想給A傳數(shù)據(jù)，那么就要在A中給B的標(biāo)簽綁定自定義事件（事件的回調(diào)在A中，用來接收數(shù)據(jù)）。
3、綁定自定義事件：
（1） 第一種方式，在父組件中：
（2）第二種方式，在父組件中：
<Demo ref="demo"/>...... mounted(){ this.$refs.xxx.$on('atguigu',this.test) }（3）若想讓自定義事件只能觸發(fā)一次，可以使用.once修飾符，或$once方法。
4、觸發(fā)自定義事件：this.$emit('atguigu',數(shù)據(jù))給誰綁的就找誰觸發(fā)
5、解綁自定義事件this.$off('atguigu')
6、組件上也可以綁定原生DOM事件，需要使用native修飾符。
7、注意：通過this.$refs.xxx.$on('atguigu',回調(diào))綁定自定義事件時(shí)，回調(diào)要么配置在methods中，要么用箭頭函數(shù)，否則this指向會(huì)出問題！
1.引出組件自定義事件
在之前我們想要實(shí)現(xiàn)子組件給父組件傳數(shù)據(jù)，都是通過父組件給子組件傳遞函數(shù)類型的props實(shí)現(xiàn)，在App中：
<!-- 通過父組件給子組件傳遞函數(shù)類型的props實(shí)現(xiàn)：子給父傳數(shù)據(jù) --> <School :getSchoolName="getSchoolName" /> getSchoolName(name) {console.log('App收到了學(xué)校名：', name); },然后在School中使用props接收，然后把name傳過來。
<button @click="sendSchoolName(name)">點(diǎn)擊把name交給App</button> props: ['getSchoolName'],methods: {sendSchoolName(name) {this.getSchoolName(name);}},2.怎么給組件綁定？
（1）使用v-on
上面的子給父傳數(shù)據(jù)，如今我們也可以換一種方式實(shí)現(xiàn)，那就是通過父組件給子組件綁定一個(gè)自定義事件實(shí)現(xiàn)。zzy事件被觸發(fā)，就會(huì)調(diào)用getStudentName
<!-- 通過父組件給子組件綁定一個(gè)自定義事件實(shí)現(xiàn)：子給父傳數(shù)據(jù)(第一種寫法，使用v-on或@) --> <Student v-on:zzy="getStudentName"></Student> getStudentName(name, age) {console.log('App收到了學(xué)生名：', name, age);}然后在Student組件中觸發(fā)這個(gè)事件，使用$emit，第一個(gè)參數(shù)是事件名，后面的是實(shí)參，使用函數(shù)可以觸發(fā)Student中的zzy事件
<button @click="sendStudentName">點(diǎn)我把學(xué)生名給App</button> sendStudentName() {//觸發(fā)Student組件實(shí)例身上的zzy事件,并傳數(shù)據(jù)過去this.$emit('zzy', this.name, this.age);}（2）使用ref
使用ref也可以讓父組件給子組件綁定一個(gè)自定義事件
<Student ref="student" />使用ref獲取組件實(shí)例，然后使用$on綁定zzy事件，第一個(gè)參數(shù)是事件名，第二個(gè)參數(shù)是事件觸發(fā)后的回調(diào)函數(shù)。
觸發(fā)方式和上面一樣，用$emit
如果想只觸發(fā)一次，用$once
這種寫法更靈活，可以異步誒
3.怎么解綁？
使用$off解綁
<Student v-on:zzy="getStudentName" @ht="getStudentName"></Student> //解綁一個(gè)自定義事件 this.$off('zzy'); //解綁多個(gè)自定義事件 this.$off(['zzy', 'ht']); //解綁所有自定義事件 this.$off();這里面有個(gè)很奇怪的地方，如果父組件寫了多個(gè)Student標(biāo)簽（建立了多個(gè)vc），那么解綁的話只能解綁當(dāng)前vc的自定義事件，其他vc的碰不到誒
4.幾個(gè)注意點(diǎn)
1、銷毀組件實(shí)例或者vm，其下面的自定義事件和原生DOM事件都會(huì)失效（老師的版本原生DOM事件不會(huì)失效，但是現(xiàn)在好像也會(huì)失效了，奇怪）
2、通過this.$refs.xxx.$on('atguigu',回調(diào))綁定自定義事件時(shí)，回調(diào)要么配置在methods中然后通過this.getStudentName傳過來。
要么用箭頭函數(shù)：
mounted() {this.$refs.student.$on('zzy', (name, ...arr) => {console.log(this); //this指向App組件實(shí)例this.studentName = name; //成功，因?yàn)閠his指向的是App組件實(shí)例對(duì)象});}否則this指向會(huì)出問題！
mounted() {this.$refs.student.$on('zzy', function (name, ...arr) {console.log(this); //this指向Student組件實(shí)例this.studentName = name; //失敗，因?yàn)閠his指向的是Student組件實(shí)例對(duì)象});}3、組件上寫的v-on都會(huì)被當(dāng)成自定義事件，即便是寫@click也會(huì)當(dāng)成自定義事件，想要用原生DOM事件的話，需要加native，比如@click.native = "demo"
三、TodoList自定義事件
Header和Footer用到了子傳父（Item是孫傳父了，自定義事件沒發(fā)解決）
App里標(biāo)簽寫，Header里觸發(fā)，然后把值傳過去
同理，換個(gè)寫法把，先App中添加自定義事件
<MyFooter ref="footer" :todos="todos" :deleteTodo="deleteTodo"></MyFooter> mounted() {//掛載完成后給MyFooter組件實(shí)例添加事件this.$refs.footer.$on('getIsdone', this.checkAllTodos);this.$refs.footer.$on('deleteDone', this.deleteDone); }再去Footer里觸發(fā)事件（需要傳數(shù)據(jù)的就傳過去數(shù)據(jù)，不需要傳就直接觸發(fā)調(diào)用）
methods: {handleCheckAll(e) {// this.checkAllTodos(!this.isAll); 這么寫容易暈this.$emit('getIsdone', e.target.checked); //觸發(fā)事件，把數(shù)據(jù)傳過去},clearDone() {this.$emit('deleteDone'); //觸發(fā)App中的事件，調(diào)用App中的回調(diào)} },總結(jié)
以上是生活随笔為你收集整理的Vue2（九）：浏览器本地存储、组件自定义事件、TodoList自定义事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 链表-链表中环的入口结点
- 下一篇： struts s标签中的s:select