vue传参数的方法有哪些

青灯夜游

发布时间：2021-09-15 14:55:42

11974人浏览过

来源于php中文网

原创

传参数的方法：1、父子组件间利用“props”和“$emit”进行传参；2、爷孙组件间利用“provide”和“inject”进行传参；3、兄弟组件间利用公共文件来传参；4、路由间使用“query”和“params”来传参。

vue传参数的方法有哪些

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

Vue中常见参数传递方式

组件通信——vue中父子组件间的方法调用和参数传递props、$emit

立即学习“前端免费学习笔记（深入）”；
组件通信——爷孙组件间的传参provide、inject
组件通信——兄弟组件间的传参bus.js
路由间的传参query、params

一、父子组件

1.1父传子（props）

页面数据效果如下

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

1.2子传父（$emit）

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

站长俱乐部购物系统

功能介绍：1、模块化的程序设计，使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外，这些过程还提供了不同的调用参数，以实现不同的效果；2、阅读等级功能，可以加密产品，进行收费管理；3、可以完全可视化编辑文章内容，所见即所得；4、无组件上传文件，服务器无需安装任何上传组件，无需支持FSO，即可上传文件。可限制文件上传的类

下载

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