組件間傳值及傳值校驗 · vue筆記

[TOC] >[success] # 組件間傳值及傳值校驗在本節將講述 **組件之間的傳值的方式** ，以及傳過來的 **值得校驗** 。 >[success] ## 組件間傳值 1. **父傳子** **父組件** 中調用 **子組件標簽** ，通過在標簽上添加 **屬性** 的形式 **給子組件傳值** ，子組件通過 **props** 來接收 **父組件** 傳入的值 **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({ template: ` <div> <test content="hello world" /> </div>` }) // 創建全局組件 app.component('test', { props: ['content'], // 接收父組件傳入的值 template: '<div>{{content}}</div>' }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 傳值校驗有時候 **子組件 props 接收父組件傳入值** 不是想要的 **類型** ，所以在這里講一下 **子組件如何校驗父組件傳過來的值** 。 **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: 10000 } }, template: ` <div> <test :content="num" /> </div>` }) // 創建全局組件 // type： String, Boolean, Array, Object, Function, Symbol 數據的類型 // required： true / false 必填 // default: 默認值 // validator函數:可以做一些邏輯性的校驗，例如：傳入的值是否小于1000，返回布爾值結果 app.component('test', { props: { content: { type: Number, // 類型：校驗要傳入的類型格式Number類型 default: 789, // 默認值：數組、對象時需要是一個函數返回{}或[] validator: function(value) { // value：父組件傳遞過來的值 return value < 1000 } } }, template: '<div>{{content}}</div>' }) const vm = app.mount('#root') </script> </html> ~~~