<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>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                [TOC] >[success] # 父子組件間如何通過事件進行通信 **需求** :封裝一個 **計數器組件** ,**父給子傳一個數字,子組件中每次點擊數字時,數字自增 +1** ,這樣就涉及到了需要**修改父組件傳入的值** ,我們之前講過 **vue** 是 **單向數據流** ,**子組件不可以修改父組件傳遞的數據** ,之前的 **解決辦法是復制一份副本修改副本** ,那么我們今天講一下另外一種解決辦法, **我們在子組件通過事件告訴父組件來修改這個值** 。 1. **子傳父** ~~~ <!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 { count: 1 } }, methods: { handleAddOne(param){ this.count += param } }, template: ` <div> <counter :count="count" @add-one="handleAddOne" /> </div> ` }) // 子組件 app.component('counter', { props: ['count'], methods: { handleClick(){ this.$emit('addOne', 2) } }, template: ` <div @click="handleClick">{{count}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 子組件 **$emit('addOne')** 時, **事件名**可以是 **駝峰式命名** ,但是 **在標簽上使用時應該是中劃線方式@add-one="handleAddOne"** 。 上面的計算方式是 **子組件通過事件來告知父組件,父組件計算后傳給子組件** ,也可以**在子組件中計算完成后,傳入給父組件,父組件再回傳回來** ,如下: ~~~ <!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 { count: 1 } }, methods: { handleAddOne(param){ this.count = param } }, template: ` <div> <counter :count="count" @add-one="handleAddOne" /> </div> ` }) // 子組件 app.component('counter', { props: ['count'], methods: { handleClick(){ this.$emit('addOne', this.count + 2) } }, template: ` <div @click="handleClick">{{count}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] # emits 如果一個 **子組件向外部觸發事件** ,可以寫一個 **emits** 的 **對象或數組** ,來 **存放$emit定義的事件**。 **emits的作用** : 為了 **方便易于維護,寫在emits中,一眼就能看到組件中向外傳遞了哪些事件**,很方便, 還可以 **校驗$emit回傳的值的格式** ~~~ <!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 { count: 1 } }, methods: { handleAddOne(param){ this.count = param } }, template: ` <div> <counter :count="count" @add-one="handleAddOne" /> </div> ` }) // 子組件 app.component('counter', { props: ['count'], // emits: ['addOne'], // 數組形式 emits: { // 對象形式 addOne: (count) => { // count參數:this.$emit('addOne', 對應這個count) if(count < 0){ // 如果參數大于0,同意事件往外傳值 return true } // 如果小于0,不允許往外傳,并且給予警告 return false } }, // 對象形式 methods: { handleClick(){ this.$emit('addOne', this.count + 2) } }, template: ` <div @click="handleClick">{{count}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~
                  <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>

                              哎呀哎呀视频在线观看