这篇文章给大家分享的是有关vue如何传参数的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了台前免费建站欢迎大家使用!
传参数的方法: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组件这是父组件要传给子组件的参数:{{msg}}
这里是child组件接受的父组件动态参数:{{ data1 }}接受的父组件静态参数:{{ data2 }}接受的父组件参数:{{ data }}
页面数据效果如下
这里要稍微注意一下,父组件所传递参数如果是需要在生命周期中获取赋值,就不能绑定在mounted中,否则子组件方法中this调用不会成功。生命周期顺序:父beforeMount->子beforeCreate……子mounted->父mounted
1.2子传父($emit)
这里是child组件
这里是father组件接收子组件参数:{{fmsg}}
点击按钮后页面效果图如下
1.3父组件调用子组件方法($on)
点击父组件
子组件
二、爷孙组件的参数传递(provide和inject,不受组件层级影响)
provide
和 inject
主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
官方文档:
https://cn.vuejs.org/v2/api/#provide-inject
https://cn.vuejs.org/v2/guide/components-edge-cases.html#依赖注入
data() { return { msg: 'A' } }, provide() { return { message: this.msg } }
components:{child}, inject:['message'],
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为123 this.$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为123 this.$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为123 this.$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如何传参数”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!