成都创新互联网站制作重庆分公司

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,不受组件层级影响)

provideinject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
官方文档:
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://cxhlcq.com/article/jcghgh.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部