1,父傳子父組件：

<template> <div> <abnormal-warning :datas="3"></abnormal-warning> // 1子組件 </div> //多個子傳一個父，變量一樣就可以了，值随便傳，其他不變 <abnormal-warning :datas="3"></abnormal-warning> // 子組件 <abnormal-warning :datas="4"></abnormal-warning> // 子組件 <abnormal-warning :datas="5"></abnormal-warning> // 子組件 </template> <script> import AbnormalWarning from '../../components/threshold/AbnormalWarning.vue' //2，引入子組件 export default { components:{ AbnormalWarning, // 3 注冊子組件 }, } </script>

這裡我在父組件中傳了一個3過去，并且變量名是datas，子組件接收datas的值子組件：

export default { props:['datas'],// 1 子組件通過props接收，有多個都寫在這個數組裡面 mounted(){ console.log(this.datas) //打印看看datas的值 }

總結： 在父組件裡面綁定一個變量傳參到子組件，子組件通過props接收。2，子傳父子組件：

通過事件綁定一個方法，在方法裡面用this.$emit(“标記”，值)，如果傳多個值就用數組或者對象包裹即可，“标記”在父組件那裡要一緻，子組件怎麼定義父組件就這麼拿，父組件：

父組件裡面在子組件上綁定一個方法，方法變量就是子組件那個标記，方法名就随便即可。代碼就不複制了，自己敲兩遍加深印象。3.兄弟之間的傳值這裡使用事件中央總線進行兄弟之間的傳值1，在main.js中注冊挂載全局的事件中央總線

// 事件中央總線 var bus = new Vue() Vue.prototype.$bus= bus;

2，兄弟A組件發送值

這裡通過一個點擊事件進行發送值，發送值用this.b u s . bus.bus.emit()，括号裡面第一個參數是标記，等下兄弟B就是通過這個标記來接收值，第二個參數就是要發送的值，如果有多個就用數組或者對象包裹即可。

methods:{ sendData(){ this.$bus.$emit("sendNum",1); } }

3，兄弟B組件接收值

這裡是一進兄弟B就要判斷的，所有在mounted裡面接收，也可以通過點擊事件接收，一樣的，接收值用this.b u s . bus.bus.on()，括号第一個參數就是上面發送時候的标記，第二個就是一個回調函數，接收A發送過來的值。

mounted() { this.$bus.$on("sendNum",(data)=>{ console.log(data); }) }

ok，以上就是vue常見的三種傳值方法了，如有問題，歡迎留言。最後：如果此篇博文對您有幫助，還請動動小手點點關注點點贊呐~，謝謝 ~ ~

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!