<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                [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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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**
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看