<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] # 基礎語法知識點查缺補漏 1. **ref** :獲取 **dom** , **調用組件內部方法** 2. **provide** / **inject** : **多層組件傳值** >[success] ## ref **ref 可以獲取 dom 元素** ,獲取 **dom元素**盡量在 **mounted** 中獲取,想獲取那個 **dom** 就在哪個 **dom** 上添加一個 **ref** 屬性然后 **定義一個名稱** ,在使用時候直接 **this.$refs.定義的屬性** 即可使用,如下: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ref</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 } }, mounted(){ console.log(this.$refs.count) }, template: ` <div> <div ref="count"> {{count}} </div> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ **ref** 不僅可以獲取 **dom** 元素,還可以用來 **調用組件內部方法** ,如下: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ref</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 } }, mounted(){ this.$refs.common.sayHello() }, template: ` <div> <common-item ref="common" /> </div> ` }) app.component('common-item', { methods: { sayHello(){ alert('hello') }, }, template: `<div>hello world</div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## provide / inject 如果有這樣一個結構, **父親組件 > 兒子組件 > 孫子組件** , **父組件調用子組件,子組件調用孫子組件** ,如果 **父組件** 想給 **孫子組件傳一個值就需要一層一層的傳遞這個參數**,也就是 **跨層傳參** ,我們通常會這樣寫: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>provide / inject</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 } }, template: ` <div> <child :count="count" /> </div> ` }) // 兒子組件 app.component('child', { props: ['count'], template: `<child-child :count="count" />` }) // 孫子組件 app.component('child-child', { props: ['count'], template: `<div>{{count}}</div>` }) const vm = app.mount('#root') </script> </html> ~~~ 這種需要 **層層的傳遞** ,那假如還有 **爺爺組件** ,甚至 **太爺爺組件** ,難道要 **跨越 4層 / 5層的組件** 傳遞來傳遞這個值嗎,這時候我們可以使用 **vue** 提供的 **provide / inject** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>provide / inject</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: 3 } }, // provide: { // 1. 向下傳遞值(給孫子傳值) // count: 2 // }, // 如果provide的值想傳data中的變量,必須用函數的方式,像下面這樣 provide(){ // 1. 向下傳遞值(給孫子傳值) return { count: this.count } }, template: ` <div> <child /> <button @click="count += 1">Add</button> </div> ` }) // 兒子組件 app.component('child', { template: `<child-child />` }) // 孫子組件 app.component('child-child', { inject: ['count'], // 2. 接收上層組件傳過來的值(接收爺爺傳過來的值) template: `<div>{{count}}</div>` }) const vm = app.mount('#root') </script> </html> ~~~ 其實 **provide / inject** 目前還有一個問題,他的 **數據是一次性傳遞過去的,數據后續發生變化,孫子組件的數據不會更新** ,那么在后續講解 **vue3.0** 中,我們會講解如何解決這個問題。
                  <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>

                              哎呀哎呀视频在线观看