1. 概述
韋奇定律告訴我們：大部分人都很容易被別人的話所左右，從而開始動搖、懷疑，最終迷失自我。因此我們要努力的堅定信念，相信自己，才不會被周圍的環境所左右，才能取得最終的勝利。
言歸正傳，之前我們聊了組件的概念，既然有多個組件，那自然存在組件間傳參的問題，今天我們就來聊聊 VUE 的 組件傳參。
2. 組件傳參
2.1 初識組件傳參
<body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ template:` <div> <test content="hello" /> </div> ` }); app.component("test", { props:['content'], template:` <div>{{content}}</div> ` });
從例子中可以看出，我們在主組件的 test 組件中增加了屬性 content，並在 test 組件中使用 props 接收了 content 屬性，然后在 template 中使用
2.2 組件參數綁定數據
const app = Vue.createApp({ data() { return { num: 123 } }, template:` <div> <test :content="num" /> </div> ` }); app.component("test", { props:['content'], template:` <div>{{content}}</div> ` });
這個例子中，我們稍微改進了一下，組件的屬性不再是寫死的，而是使用我們之前學的綁定知識，使用 :content="num"，與數據中的 num 綁定
2.3 向組件中傳多個參數
const app = Vue.createApp({ data() { return { num1: 123, num2: 456, num3: 789 } }, template:` <div> <test :num1="num1" :num2="num2" :num3="num3" /> </div> ` }); app.component("test", { props:['num1', 'num2', 'num3'], template:` <div>{{num1}}</div> <div>{{num2}}</div> <div>{{num3}}</div> ` });
同理，在組件 test 的標簽中多寫一些屬性，num1、num2、num3，然后在 test 組件中使用 props 接收這些參數
似乎沒有什么問題，但如果需要傳的參數很多， 就有點不優雅了
2.4 向組件中傳多個參數-改進版1
const app = Vue.createApp({ data() { return { params : { num1: 123, num2: 456, num3: 789 } } }, template:` <div> <test v-bind="params" /> </div> ` }); app.component("test", { props:['num1', 'num2', 'num3'], template:` <div>{{num1}}</div> <div>{{num2}}</div> <div>{{num3}}</div> ` });
這個例子，把 num1、num2、num3 封裝到了 params 這個對象中，然后使用 v-bind="params"，將整個對象傳給組件，組件接收的方式不變，比之前優雅很多
2.5 向組件中傳多個參數-改進版2
const app = Vue.createApp({ data() { return { params : { num1: 123, num2: 456, num3: 789 } } }, template:` <div> <test :params="params" /> </div> ` }); app.component("test", { props:['params'], template:` <div>{{params.num1}}</div> <div>{{params.num2}}</div> <div>{{params.num3}}</div> ` });
這個例子較上個例子稍有不同，主組件使用對象的方式傳遞 :params="params"，test 子組件也使用對象的方式接收 props:['params']，使用時使用 params.num1 的方式
這種方式較上一種方式，感覺更符合一般的編程習慣，根據個人喜好使用吧
2.6 參數的名稱由多個單詞組成
const app = Vue.createApp({ data() { return { num: 123 } }, template:` <div> <test :num-a="num" /> </div> ` }); app.component("test", { props:['numA'], template:` <div>{{numA}}</div> ` });
當參數的名稱由多個單詞組成，官方的建議是，在組件標簽中使用 小寫 + ‘-’ 的方式命名，例如：num-a
但在子組件接收時，要使用駝峰命名法接收，例如：numA
哈哈，有點坑哦，要是寫成 props:['num-a'] 是接收不到參數的
2.7 參數的計算（錯誤案例）
const app = Vue.createApp({ data() { return { num: 10 } }, template:` <div> <test :num="num" /> </div> ` }); app.component("test", { props:['num'], template:` <div>{{num}}</div> <button @click="num = num + 1">num 加 1</button> ` });
這個例子，我們接收到參數后，在子組件中將其自增
很不幸，自增沒有成功，提示錯誤，大概意思是：這個參數是只讀滴，不能修改 :(
那怎么辦呢，看下面的例子
2.8 參數的計算（成功案例）
app.component("test", { props:['num'], data() { return { myNum : this.num } }, template:` <div>{{myNum}}</div> <button @click="myNum = myNum + 1">num 加 1</button> ` });
上一個例子告訴我們，父組件傳過來的參數，到了子組件都是只讀的，不能改變
因此我們換一個思路，我們在子組件中建一個自己的數據 myNum，然后把父組件傳過來的數據作為初始值，然后去自增子組件的 myNum 數據
很明顯是可以的
3. 綜述
今天聊了一下 VUE3 的 組件傳參，希望可以對大家的工作有所幫助，下一節我們繼續講組件的相關知識，敬請期待
歡迎幫忙點贊、評論、轉發、加關注 ：）
關注追風人聊Java，每天更新Java干貨。
4. 個人公眾號
追風人聊Java，歡迎大家關注
