單向數據流的理解 · vue筆記

[TOC] >[success] # 單向數據流的理解 **vue中子組件可以使用父組件傳遞過來的數據，但是絕對不能修改傳遞過來的數據** 。 **需求**：封裝一個 **計數器組件** ，根據 **父組件傳入的數值，在子組件中點擊數值后每次自增 + 1** 。上面的需求中， **子組件每次自增 + 1** 時，就會 **改變父組件的值** ，這樣就 **違背了vue的單項數據流** ，那么如何解決呢？ **解決方案**：**子組件內用一個變量，復制父組件傳入的數值副本** ，通過 **修改變量副本** 達到想要的效果。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 單向數據流的理解</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return { num: 1 } }, template: ` <div> <counter :count="num"/> </div>` }) // 創建全局組件 app.component('counter', { props: ['count'], data(){ return { myCount: this.count // 復制一份count } }, template: '<div @click="myCount += 1 ">{{myCount}}</div>' }) const vm = app.mount('#root') </script> </html> ~~~ 為什么 **vue是單項數據流** 呢，看下面的代碼中， **引入了4次子組件** ，并且**4個組件中傳入的值** 都是 **num變量**，我們思考一下，如果 **其中一個子組件修改了num ，那么其他用到num變量的組件也會被同時改變** ，這樣就會出現問題，這就是 **單項數據流不允許子組件修改父組件傳入的數據，避免數據出現高度耦合** 。 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 單向數據流的理解</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return { num: 1 } }, template: ` <div> <counter :count="num"/> <counter :count="num"/> <counter :count="num"/> <counter :count="num"/> </div>` }) // 創建全局組件 app.component('counter', { props: ['count'], data(){ return { myCount: this.count // 復制一份count } }, template: '<div @click="myCount += 1 ">{{myCount}}</div>' }) const vm = app.mount('#root') </script> </html> ~~~ >[warning] # 注意 1. **父組件給子組件傳值** ，如果傳入的值有很多，可以用 **傳入對象的形式** 。 2. 如果 **自定義的屬性名** 很長，可以用 **中劃線分割單詞的形式** ，例如： **picker-name** ，那樣的話，在子組件內 **props中接收** 就要這樣寫：**pickerName**