傳參數(shù)的方法：1、父子組件間利用“props”和“$emit”進(jìn)行傳參；2、爺孫組件間利用“provide”和“inject”進(jìn)行傳參；3、兄弟組件間利用公共文件來(lái)傳參；4、路由間使用“query”和“params”來(lái)傳參。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

Vue中常見(jiàn)參數(shù)傳遞方式

• 組件通信——vue中父子組件間的方法調(diào)用和參數(shù)傳遞props、$emit

• 組件通信——爺孫組件間的傳參provide、inject

• 組件通信——兄弟組件間的傳參bus.js

• 路由間的傳參query、params

一、父子組件

1.1父?jìng)髯樱╬rops）

<!-- 父組件father.vue --> <template>   <div>     <div>這里是father組件</div>     <div>這是父組件要傳給子組件的參數(shù)：{{msg}}</div>     <!-- 1.傳遞：data1為動(dòng)態(tài)參數(shù)msg的參數(shù)名，名字自定義，與子組件接收參數(shù)名同名     data2為靜態(tài)參數(shù)的參數(shù)名，名字自定義，與子組件接收參數(shù)名同名 -->     <child :data1="msg" data2="777"></child>   </div> </template> <script>   import child from "./child";   export default {       data() {           return {               msg:"666"           }       },     components: {       child     }   }; </script>

<!-- 子組件child.vue --> <template>   <div>     <div>這里是child組件</div>     <!-- 3.使用：這里就是接收的父組件參數(shù) -->     <div>接受的父組件動(dòng)態(tài)參數(shù)：{{ data1 }}</div>     <div>接受的父組件靜態(tài)參數(shù)：{{ data2 }}</div>     <div>接受的父組件參數(shù)：{{ data }}</div>   </div> </template> <script>   export default {     // 2.接收：props接收父組件參數(shù)，data1與data2為傳遞參數(shù)的參數(shù)名，與父組件內(nèi)同名     props: ["data1", "data2"],     data() {       return {         data: "默認(rèn)值"       };     },     // 3.使用：直接用this調(diào)用     mounted() {       this.data = this.data1;     }   }; </script>

頁(yè)面數(shù)據(jù)效果如下

這里要稍微注意一下，父組件所傳遞參數(shù)如果是需要在生命周期中獲取賦值，就不能綁定在mounted中，否則子組件方法中this調(diào)用不會(huì)成功。生命周期順序：父beforeMount->子beforeCreate……子mounted->父mounted

1.2子傳父（$emit）

<!-- 子組件child.vue --> <template>   <div>     <div>這里是child組件</div>     <!-- 這里就是接收的父組件參數(shù) -->     <input type="button" value="點(diǎn)擊向父組件傳參" @click="toFather">   </div> </template> <script>   export default {     data(){       return{         cmsg:'我是子組件的參數(shù)'       }     },     methods: {       toFather(){         // 1.子組件觸發(fā)父組件方法         // $emit第一個(gè)參數(shù)為所要觸發(fā)的父組件函數(shù)，函數(shù)名可自定義但要與父組件中對(duì)應(yīng)函數(shù)名同名         // $emit第二個(gè)參數(shù)就是子組件向父組件傳遞的參數(shù)         this.$emit('receive',this.cmsg);       }     },   }; </script> <style scoped></style>

<!-- father.vue --> <template>   <div>     <div>這里是father組件</div>     <div>接收子組件參數(shù)：{{fmsg}}</div>     <!-- 2.在對(duì)應(yīng)子組件上綁定函數(shù)，這里“receive”是函數(shù)名，可自定義但要與子組件觸發(fā)函數(shù)同名 -->     <child @receive="fromChild"></child>   </div> </template> <script>   import child from "./child";   export default {     data() {       return {         fmsg:''       };     },     methods: {       // 接收子組件參數(shù)，賦值       fromChild(data){         this.fmsg=data;       }     },     components: {       child     }   }; </script> <style scoped></style>

點(diǎn)擊按鈕后頁(yè)面效果圖如下

1.3父組件調(diào)用子組件方法（$on）

<!-- father.vue --> <template>     <div>         <div @click="click">點(diǎn)擊父組件</div>         <child ref="child"></child>     </div> </template>  <script>     import child from "./child";     export default {         methods: {             click() {                 this.$refs.child.$emit('childMethod','發(fā)送給方法一的數(shù)據(jù)') // 方法1:觸發(fā)監(jiān)聽(tīng)事件                 this.$refs.child.callMethod() // 方法2:直接調(diào)用             },         },         components: {             child,         }     } </script>

<!-- child.vue --> <template>     <div>子組件</div> </template>  <script>     export default {         mounted() {             this.monitoring() // 注冊(cè)監(jiān)聽(tīng)事件         },         methods: {             monitoring() { // 監(jiān)聽(tīng)事件                 this.$on('childMethod', (res) => {                     console.log('方法1:觸發(fā)監(jiān)聽(tīng)事件監(jiān)聽(tīng)成功')                     console.log(res)                 })             },             callMethod() {                 console.log('方法2:直接調(diào)用調(diào)用成功')             },         }     } </script>

二、爺孫組件的參數(shù)傳遞（provide和inject，不受組件層級(jí)影響）

provide 和 inject 主要為高階插件/組件庫(kù)提供用例。并不推薦直接用于應(yīng)用程序代碼中。
官方文檔：
https://cn.vuejs.org/v2/api/#provide-inject
https://cn.vuejs.org/v2/guide/components-edge-cases.html#依賴(lài)注入

<!-- grandpa.vue -->         data() {             return {                 msg: 'A'             }         },         provide() {             return {                 message: this.msg             }         }

<!-- father.vue -->         components:{child},         inject:['message'],

<!-- child.vue -->         inject: ['message'],         created() {             console.log(this.message)    // A         },

三、兄弟組件的參數(shù)傳遞（bus.js）

3.1創(chuàng)建公交bus.js

3.2像兄弟組件傳遞參數(shù)

import Bus from "@/utils/bus";   //注意引入     export default {         data(){             return {                 num:1             }         },         methods: {             handle(){                 Bus.$emit("brother", this.num++, "子組件向兄弟組件傳值");             }         },     }

3.3接受兄弟組件的參數(shù)

import Bus from "@/utils/bus";   //注意引入     export default {         data(){             return {                 data1:'',                 data2:''             }         },         mounted() {             Bus.$on("brother", (val, val1) => {    //取 Bus.$on                 this.data1 = val;                 this.data2 = val1;             });         },     }

四、路由間的參數(shù)傳遞（query和params）

query和parmas的使用方式大致相同，這里簡(jiǎn)單介紹一下路由配置、參數(shù)的傳遞和調(diào)用

4.1params，參數(shù)顯示在url

// router的配置     {       path: "/two/:id/:data",   　　// 跳轉(zhuǎn)的路由后加上/:id，多個(gè)參數(shù)繼續(xù)按格式添加，數(shù)據(jù)按順序?qū)?yīng)       name: "two",       component: two     }  // 跳轉(zhuǎn),這里message為123 　　this.$router.push({ 　　　　path: `/two/${this.message}/456`   　　// 直接把數(shù)據(jù)拼接在path后面 　　});  // 接收 　　created() {       this.msg1=this.$route.params.id    // 123       this.msg2=this.$route.params.data　　// 456    }  // url顯示，數(shù)據(jù)顯示在url，所以這種方式傳遞數(shù)據(jù)僅限于一些不那么重要的參數(shù) 　　/two/123/456

4.2params，參數(shù)不顯示在url，刷新頁(yè)面數(shù)據(jù)消失

// router的配置     {       path: "/two",       name: "two",       component: two     } // 跳轉(zhuǎn),這里message為123 　　　　this.$router.push({ 　　　　　　name: `two`,  　　// 這里只能是name，對(duì)應(yīng)路由 　　　　　　params: { id: this.message, data: 456 } 　　　　});  // 接收 　　created() {       this.msg1=this.$route.params.id    // 123       this.msg2=this.$route.params.data　　// 456    }  // url顯示，數(shù)據(jù)不顯示在url 　　/two

4.3query，參數(shù)顯示在url

// router的配置     {       path: "/two",       name: "two",       component: two     } // 跳轉(zhuǎn),這里message為123 　　　　this.$router.push({ 　　　　　　path: `/two`,　　　　// 這里可以是path也可以是name（如果是name，name:'two'），對(duì)應(yīng)路由 　　　　　　query: { id: this.message, data: 456 } 　　　　});  // 接收 　　created() {       this.msg1=this.$route.query.id    // 123       this.msg2=this.$route.query.data　　// 456    }  // url顯示，數(shù)據(jù)顯示在url 　　/two?id=123&data=456