189 8069 5689

vue如何传参数

这篇文章给大家分享的是有关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）

页面数据效果如下

vue如何传参数

这里要稍微注意一下，父组件所传递参数如果是需要在生命周期中获取赋值，就不能绑定在mounted中，否则子组件方法中this调用不会成功。生命周期顺序：父beforeMount->子beforeCreate……子mounted->父mounted

1.2子传父（$emit）

点击按钮后页面效果图如下

vue如何传参数

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

vue如何传参数

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如何传参数”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


名称栏目：vue如何传参数
网站链接：http://cdxtjz.com/article/jcghgh.html

其他资讯