基礎語法知識點查缺補漏 · vue筆記

[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>  <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>  <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>  <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>  <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** 中，我們會講解如何解決這個問題。