Vue2學習筆記：第九章

• 一、瀏覽器本地存儲（WebStorage）
• • 1.相關API
  • 2.一些注意點
  • 3.TodoList中的本地存儲
• 二、組件自定義事件
• • 1.引出組件自定義事件
  • 2.怎么給組件綁定？
  • • （1）使用v-on
    • （2）使用ref
  • 3.怎么解綁？
  • 4.幾個注意點
• 三、TodoList自定義事件

一、瀏覽器本地存儲（WebStorage）

存儲內容大小一般支持5MB左右（不同瀏覽器可能還不一樣）
瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實現本地存儲機制。

1.相關API

（1） xxxxxStorage.setItem('key', 'value');該方法接受一個鍵和值作為參數，會把鍵值對添加到存儲中，如果鍵名存在，則更新其對應的值。
（2） xxxxxStorage.getItem('person');該方法接受一個鍵名作為參數，返回鍵名對應的值。
（3） xxxxxStorage.removeItem('key');該方法接受一個鍵名作為參數，并把該鍵名從存儲中刪除。
（4）xxxxxStorage.clear()該方法會清空存儲中的所有數據。

2.一些注意點

（1）SessionStorage存儲的內容會隨著瀏覽器窗口關閉而消失。
（2） LocalStorage存儲的內容，需要手動清除才會消失（調用clear或者清除緩存）。
（3） xxxxxStorage.getItem(xxx)如果xxx對應的value獲取不到，那么getItem的返回值是null。
（4）JSON.parse(null)的結果依然是null。

3.TodoList中的本地存儲

碉堡了兄弟們，這里面的幾個細節：
1、用watch監視todos數據的變化，如果數據改變那么瀏覽器本地存儲就存個緩存，名字還叫todos，值是更新后的數組（要轉化為JSON字符串瀏覽器才能顯示）

2、只監視是沒用的，如果只監視不讀取，那么數據會緩存到瀏覽器，但是頁面刷新網頁不會同步，所以一定要在data中讀取瀏覽器中的數據，當然頁面一上來可能沒有緩存（也沒添加任何數據），那么這時候JSON.parse(localStorage.getItem('todos'))就是null（這樣會報錯的），所以再來個邏輯或，如果是null那么就todos初始化為空數組唄，然后再自己往里兒加數據，后面再刷新就會直接讀瀏覽器了（總結：初始化時如果有就讀，沒有就初始值為空數組）

3、還有，watch中要配置深度監視deep，否則頁面刷新已經勾選的就重置了，這是因為watch監視todos只會監視todos里面的元素，也就是每個對象的地址，但是對象屬性的變化監測不到，但是加了deep就監視到了

data() {return {// JSON.parse將格式完好的json字符串轉換為json對象//如果有就讀，沒有就初始值為空數組todos: JSON.parse(localStorage.getItem('todos')) || []};},

JSON.stringify將Js對象或值轉換為JSON格式化的字符串
JSON.parse將格式完好的json字符串轉換為json對象

watch: {todos: {deep: true, //深度監視不加，那么todos里面的東西改了是監測不到的handler(newVal) {// JSON.parse將格式完好的json字符串轉換為json對象// JSON.stringify將Js對象或值轉換為JSON格式化的字符串localStorage.setItem('todos', JSON.stringify(newVal));}}}

二、組件自定義事件

1、一種組件間通信的方式，適用于：子組件 ===> 父組件
2、使用場景：A是父組件，B是子組件，B想給A傳數據，那么就要在A中給B的標簽綁定自定義事件（事件的回調在A中，用來接收數據）。
3、綁定自定義事件：
（1） 第一種方式，在父組件中：

<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>

（2）第二種方式，在父組件中：

<Demo ref="demo"/>...... mounted(){ this.$refs.xxx.$on('atguigu',this.test) }

（3）若想讓自定義事件只能觸發一次，可以使用.once修飾符，或$once方法。

4、觸發自定義事件：this.$emit('atguigu',數據)給誰綁的就找誰觸發
5、解綁自定義事件this.$off('atguigu')
6、組件上也可以綁定原生DOM事件，需要使用native修飾符。
7、注意：通過this.$refs.xxx.$on('atguigu',回調)綁定自定義事件時，回調要么配置在methods中，要么用箭頭函數，否則this指向會出問題！

1.引出組件自定義事件

在之前我們想要實現子組件給父組件傳數據，都是通過父組件給子組件傳遞函數類型的props實現，在App中：

<!-- 通過父組件給子組件傳遞函數類型的props實現：子給父傳數據 --> <School :getSchoolName="getSchoolName" /> getSchoolName(name) {console.log('App收到了學校名：', name); },

然后在School中使用props接收，然后把name傳過來。

<button @click="sendSchoolName(name)">點擊把name交給App</button> props: ['getSchoolName'],methods: {sendSchoolName(name) {this.getSchoolName(name);}},

2.怎么給組件綁定？

（1）使用v-on

上面的子給父傳數據，如今我們也可以換一種方式實現，那就是通過父組件給子組件綁定一個自定義事件實現。zzy事件被觸發，就會調用getStudentName

<!-- 通過父組件給子組件綁定一個自定義事件實現：子給父傳數據(第一種寫法，使用v-on或@) --> <Student v-on:zzy="getStudentName"></Student> getStudentName(name, age) {console.log('App收到了學生名：', name, age);}

然后在Student組件中觸發這個事件，使用$emit，第一個參數是事件名，后面的是實參，使用函數可以觸發Student中的zzy事件

<button @click="sendStudentName">點我把學生名給App</button> sendStudentName() {//觸發Student組件實例身上的zzy事件,并傳數據過去this.$emit('zzy', this.name, this.age);}

（2）使用ref

使用ref也可以讓父組件給子組件綁定一個自定義事件

<Student ref="student" />

使用ref獲取組件實例，然后使用$on綁定zzy事件，第一個參數是事件名，第二個參數是事件觸發后的回調函數。
觸發方式和上面一樣，用$emit
如果想只觸發一次，用$once

methods: {getSchoolName(name) {console.log('App收到了學校名：', name);},getStudentName(name, age) {console.log('App收到了學生名：', name, age);} }, //掛載完成時，手動把zzy事件綁定到student的vc上 mounted() {// this.$refs.student.name???setTimeout(() => {//掛載完成后，隔3秒再給Student綁定事件this.$refs.student.$on('zzy', this.getStudentName);}, 3000);//掛載完成時，手動把zzy事件綁定到student的vc上(且只能觸發一次)// this.$refs.student.$once('zzy', this.getStudentName); }

這種寫法更靈活，可以異步誒

3.怎么解綁？

使用$off解綁

<Student v-on:zzy="getStudentName" @ht="getStudentName"></Student> //解綁一個自定義事件 this.$off('zzy'); //解綁多個自定義事件 this.$off(['zzy', 'ht']); //解綁所有自定義事件 this.$off();

這里面有個很奇怪的地方，如果父組件寫了多個Student標簽（建立了多個vc），那么解綁的話只能解綁當前vc的自定義事件，其他vc的碰不到誒

4.幾個注意點

1、銷毀組件實例或者vm，其下面的自定義事件和原生DOM事件都會失效（老師的版本原生DOM事件不會失效，但是現在好像也會失效了，奇怪）
2、通過this.$refs.xxx.$on('atguigu',回調)綁定自定義事件時，回調要么配置在methods中然后通過this.getStudentName傳過來。

this.$refs.student.$on('zzy', this.getStudentName);

要么用箭頭函數：

mounted() {this.$refs.student.$on('zzy', (name, ...arr) => {console.log(this); //this指向App組件實例this.studentName = name; //成功，因為this指向的是App組件實例對象});}

否則this指向會出問題！

mounted() {this.$refs.student.$on('zzy', function (name, ...arr) {console.log(this); //this指向Student組件實例this.studentName = name; //失敗，因為this指向的是Student組件實例對象});}

3、組件上寫的v-on都會被當成自定義事件，即便是寫@click也會當成自定義事件，想要用原生DOM事件的話，需要加native，比如@click.native = "demo"

三、TodoList自定義事件

Header和Footer用到了子傳父（Item是孫傳父了，自定義事件沒發解決）
App里標簽寫，Header里觸發，然后把值傳過去

<MyHeader @getAdd="addTodo"></MyHeader> this.$emit('addTodo',todoObj)

同理，換個寫法把，先App中添加自定義事件

<MyFooter ref="footer" :todos="todos" :deleteTodo="deleteTodo"></MyFooter> mounted() {//掛載完成后給MyFooter組件實例添加事件this.$refs.footer.$on('getIsdone', this.checkAllTodos);this.$refs.footer.$on('deleteDone', this.deleteDone); }

再去Footer里觸發事件（需要傳數據的就傳過去數據，不需要傳就直接觸發調用）

methods: {handleCheckAll(e) {// this.checkAllTodos(!this.isAll); 這么寫容易暈this.$emit('getIsdone', e.target.checked); //觸發事件，把數據傳過去},clearDone() {this.$emit('deleteDone'); //觸發App中的事件，調用App中的回調} },

總結

以上是生活随笔為你收集整理的Vue2（九）：浏览器本地存储、组件自定义事件、TodoList自定义事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。