传参数的方法：1、父子组件间利用“props”和“$emit”进行传参；2、爷孙组件间利用“provide”和“inject”进行传参；3、兄弟组件间利用公共文件来传参；4、路由间使用“query”和“params”来传参。
本教程操作环境：windows7系统、vue2.9.6版，dell g3电脑。
vue中常见参数传递方式
组件通信——vue中父子组件间的方法调用和参数传递props、$emit
组件通信——爷孙组件间的传参provide、inject
组件通信——兄弟组件间的传参bus.js
路由间的传参query、params
一、父子组件
1.1父传子（props）
<!-- 父组件father.vue --><template> <div> <div>这里是father组件</div> <div>这是父组件要传给子组件的参数：{{msg}}</div> <!-- 1.传递：data1为动态参数msg的参数名，名字自定义，与子组件接收参数名同名 data2为静态参数的参数名，名字自定义，与子组件接收参数名同名 --> <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.使用：这里就是接收的父组件参数 --> <div>接受的父组件动态参数：{{ data1 }}</div> <div>接受的父组件静态参数：{{ data2 }}</div> <div>接受的父组件参数：{{ data }}</div> </div></template><script> export default { // 2.接收：props接收父组件参数，data1与data2为传递参数的参数名，与父组件内同名 props: ["data1", "data2"], data() { return { data: "默认值" }; }, // 3.使用：直接用this调用 mounted() { this.data = this.data1; } };</script>
页面数据效果如下
这里要稍微注意一下，父组件所传递参数如果是需要在生命周期中获取赋值，就不能绑定在mounted中，否则子组件方法中this调用不会成功。生命周期顺序：父beforemount->子beforecreate……子mounted->父mounted
1.2子传父（$emit）
<!-- 子组件child.vue --><template> <div> <div>这里是child组件</div> <!-- 这里就是接收的父组件参数 --> <input type="button" value="点击向父组件传参" @click="tofather"> </div></template><script> export default { data(){ return{ cmsg:'我是子组件的参数' } }, methods: { tofather(){ // 1.子组件触发父组件方法 // $emit第一个参数为所要触发的父组件函数，函数名可自定义但要与父组件中对应函数名同名 // $emit第二个参数就是子组件向父组件传递的参数 this.$emit('receive',this.cmsg); } }, };</script><style scoped></style>
<!-- father.vue --><template> <div> <div>这里是father组件</div> <div>接收子组件参数：{{fmsg}}</div> <!-- 2.在对应子组件上绑定函数，这里“receive”是函数名，可自定义但要与子组件触发函数同名 --> <child @receive="fromchild"></child> </div></template><script> import child from "./child"; export default { data() { return { fmsg:'' }; }, methods: { // 接收子组件参数，赋值 fromchild(data){ this.fmsg=data; } }, components: { child } };</script><style scoped></style>
点击按钮后页面效果图如下
1.3父组件调用子组件方法（$on）
<!-- father.vue --><template> <div> <div @click="click">点击父组件</div> <child ref="child"></child> </div></template><script> import child from "./child"; export default { methods: { click() { this.$refs.child.$emit('childmethod','发送给方法一的数据') // 方法1:触发监听事件 this.$refs.child.callmethod() // 方法2:直接调用 }, }, components: { child, } }</script>
<!-- child.vue --><template> <div>子组件</div></template><script> export default { mounted() { this.monitoring() // 注册监听事件 }, methods: { monitoring() { // 监听事件 this.$on('childmethod', (res) => { console.log('方法1:触发监听事件监听成功') console.log(res) }) }, callmethod() { console.log('方法2:直接调用调用成功') }, } }</script>
二、爷孙组件的参数传递（provide和inject，不受组件层级影响）
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
官方文档：
https://cn.vuejs.org/v2/api/#provide-inject
https://cn.vuejs.org/v2/guide/components-edge-cases.html#依赖注入
<!-- 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 },
三、兄弟组件的参数传递（bus.js）
3.1创建公交bus.js
3.2像兄弟组件传递参数
import bus from "@/utils/bus"; //注意引入 export default { data(){ return { num:1 } }, methods: { handle(){ bus.$emit("brother", this.num++, "子组件向兄弟组件传值"); } }, }
3.3接受兄弟组件的参数
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; }); }, }
四、路由间的参数传递（query和params）
query和parmas的使用方式大致相同，这里简单介绍一下路由配置、参数的传递和调用
4.1params，参数显示在url
// router的配置 { path: "/two/:id/:data", // 跳转的路由后加上/:id，多个参数继续按格式添加，数据按顺序对应 name: "two", component: two }// 跳转,这里message为123this.$router.push({path: `/two/${this.message}/456` // 直接把数据拼接在path后面}); // 接收created() { this.msg1=this.$route.params.id // 123 this.msg2=this.$route.params.data// 456 }// url显示，数据显示在url，所以这种方式传递数据仅限于一些不那么重要的参数/two/123/456
4.2params，参数不显示在url，刷新页面数据消失
// router的配置 { path: "/two", name: "two", component: two }// 跳转,这里message为123this.$router.push({name: `two`, // 这里只能是name，对应路由params: { id: this.message, data: 456 }}); // 接收created() { this.msg1=this.$route.params.id // 123 this.msg2=this.$route.params.data// 456 }// url显示，数据不显示在url/two
4.3query，参数显示在url
// router的配置 { path: "/two", name: "two", component: two }// 跳转,这里message为123this.$router.push({path: `/two`,// 这里可以是path也可以是name（如果是name，name:'two'），对应路由query: { id: this.message, data: 456 }}); // 接收created() { this.msg1=this.$route.query.id // 123 this.msg2=this.$route.query.data// 456 }// url显示，数据显示在url/two?id=123&data=456
相关推荐：《vue.js教程》
以上就是vue传参数的方法有哪些的详细内容。