精华内容
下载资源
问答
  • vue传参

    2021-01-07 17:27:40
    vue传参包括2中方式,一种通过路径,一种通过params,如果用params的情况下,传值 this.router.push(name:′TrainSketch′,params:modelId:row.modelId,outlineName:row.outlineName,outlineText:row.outlineText,...

    vue传参包括2中方式,一种通过路径,一种通过params,如果用params的情况下,传值
    this.router.push(name:TrainSketch,params:modelId:row.modelId,outlineName:row.outlineName,outlineText:row.outlineText,troops:row.troops,arm:row.arm,staffingTime:row.staffingTime,useYear:row.useYear,version:row.version,id:row.id)this.router.push( { name: 'TrainSketch', params: { modelId: row.modelId, outlineName: row.outlineName, outlineText: row.outlineText, troops: row.troops, arm: row.arm, staffingTime: row.staffingTime, useYear: row.useYear, version: row.version, id: row.id } }) 取值的话用this.router.params;

    展开全文
  • vue 传参

    2018-09-10 12:09:15
    Vue 路由传递参数 有两种方式: 一、用name传递参数 两步完成用name传值并显示在模板里: 在路由文件src/router/index.js里配置name属性。   1 2 3 4 5 6 7 ...

    Vue 路由传递参数 有两种方式:

    一、用name传递参数

    两步完成用name传值并显示在模板里:

    1. 在路由文件src/router/index.js里配置name属性。

      
       

      1

      2

      3

      4

      5

      6

      7

      
       

      routes: [

      {

      path: '/',

      name: 'Hello',

      component: Hello

      }

      ]

    2. 模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示:

      
       

      1

      
       

      <p>{{ $route.name}}</p>

    二、通过 标签中的to传参

    上边的传参或许很不正规,也不方便,其实工作中多数传参是不用name进行传参的,我们用标签中的to属性进行传参,需要注意的是这里的to要进行一个绑定,写成:to。先来看一下这种传参方法的基本语法:

    
     

    1

    
     

    <router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

     

    这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.

    • name:就是我们在路由配置文件中起的name值。
    • params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。

    了解基本的语法后,我们改造一下我们的src/App.vue里的标签,我们把hi1页面的进行修改。

    
     

    1

    
     

    <router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>

     

    把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

    
     

    1

    
     

    {path:'/hi1',name:'hi1',component:Hi1},

     

    最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

    
     

    1

    
     

    {{$route.params.username}}

     

    vue-router 利用url传递参数 :冒号的形式传递参数

    在路由配置文件里以:冒号的形式传递参数,这就是对参数的绑定。

    1.在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

    
     

    1

    2

    3

    4

    
     

    {

    path:'/params/:newsId/:newsTitle',

    component:Params

    }

     

    • 我们需要传递参数是新闻ID(newsId)和新闻标题(newsTitle).所以我们在路由配置文件里制定了这两个值。

    2.在src/components目录下建立我们params.vue组件,也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。

    
     

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    
     

    <template>

    <div>

    <h2>{{ msg }}</h2>

    <p>新闻ID:{{ $route.params.newsId}}</p>

    <p>新闻标题:{{ $route.params.newsTitle}}</p>

    </div>

    </template>

    <script>

    export default {

    name: 'params',

    data () {

    return {

    msg: 'params page'

    }

    }

    }

    </script>

     

    3.在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了。

    
     

    1

    
     

    <router-link to="/params/198/jspang website is very good">params</router-link>

     

    • 正则表达式在URL传值中的应用

    上边的例子,我们传递了新闻编号,现在需求升级了,我们希望我们传递的新闻ID只能是数字的形式,这时候我们就需要在传递时有个基本的类型判断,vue是支持正则的。
    加入正则需要在路由配置文件里(/src/router/index.js)以圆括号的形式加入。

    
     

    1

    
     

    path:'/params/:newsId(\\d+)/:newsTitle',

    展开全文
  • 主要介绍了Vue传参一箩筐(页面、组件),Vue页面、组件之间传参方式繁多,此处罗列出常用的几种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue传值 与 vue传参是两块东西 概念图 原理 vue传参的原理主要在于 Vue.route.params(也有route.params(也有route.params (也有 route.query) route是Vue的属性.params是route是Vue的属性.params是route是...

    vue传值 与 vue传参是两块东西

    概念图

    image.png

    原理

    vue传参的原理主要在于 Vue.route.params(route.query)

    routeVue.paramsroute的属性,用来储存数据的键值对.就是说它对象,储存很多属性(键值对,属性,属性值)在里面.

    清单:

    通过浏览器插件vue devtools(vue 开发者工具插件)可以看的到$route属性内部的具体数据:
    image.png

    route.params,route是一个中间容器,用来容纳参数,是键值对的方式,这样在这个页面执行动作传递参数到route.params,route.params里拿参数,就这么回事

    在路由里定义

    //router >> index.js
    {
            path: '/Page9/:abc/:cde',
            name: 'Page9',
            component: Page9
        }

    意思就是我要往 Vue.$route.params里储存属性”abc”和”cde”,它们是作为属性名,键名key,

    而属性值则由点击路由后触发路径的变化来决定具体的值.要传输什么就写什么,比如

    //App.vue
    <router-link to="/Page9/gigi/lkjdk7338">
              点击就跳转到page9,并同时传参到Vue.$route.params
    </router-link>
    //Page9.vue
    <template>
        <div class="page1">
            <h1>{{ msg }}</h1>
            <p>{{this.$route.params}}</p>
            <h3 @click="nsj">拿数据</h3>
        </div>
    </template>
    
    <script>
        export default{
            name:'Page9',
            data(){
                return{
                    msg:'I am Page9.vue'
                }
            },
            methods:{
                nsj(){
                    this.msg = this.$route.params.asd
                }
            }
    
        }
    </script>

    意思是最后Vue.$route.params会储存{“abc” : “gigi” ,”cde” : “lkjdk7338”}
    image.png

    或者用编程路由的写法,在脚本js里写要传的参:
    html:

    <p><button @click="sj1">点击就跳转到page9,并同时传参到</button></p>

    js:

    sj1() {
                    this.$router.push({
                        path: '/Page9',
                        name: 'Page9',
                        params: {
                            abc: this.mydata,
                            cde: 'dlj'
                        }
                    })

    意思是是最后Vue.$route.params会储存{“abc” : this.mydata这个数据 ,”cde” : ”dlj”}

    如何拿值:
    这就很简单了:
    直接从Vue.route.params里拿就行了  {{route.params.abc }} –> “gigi” 或者 this.mydata具体的值

    {{ $route.params.abc }} –> ” lkjdk7338 “

    展开全文
  • 感觉Vue中父子传参的方式,实在是太多了,于是做一个小总结,只是总结我所知道的。欢迎吐槽。。我的博客​storm4542.github.io1.父传子基本就用一个方式,props父亲通过在 标签 中写入需要传入的数据。我是爸爸,...

    感觉Vue中父子传参的方式,实在是太多了,于是做一个小总结,只是总结我所知道的。

    欢迎吐槽。。我的博客​storm4542.github.io

    1.父传子

    基本就用一个方式,props

    父亲通过在 标签 中写入需要传入的数据。

    我是爸爸,下面是儿子

    儿子在 实例中的 props 选项中获取

    //son.vueexport default {

    name:'son',

    props:{

    selected:{

    type:Boolean

    },

    title:{

    type:String

    }

    }

    }

    2.子传父

    # update:my-prop-name 模式

    Vue 是单项数据流,所以不允许 儿子 直接修改父亲的数据,也不允许儿子直接修改自己的props。

    假设一个情况,点击儿子,儿子需要改变 selected 的状态。

    儿子方面

    触发点击事件后, 让儿子触发一个 update 事件,把新的 selected 传出去

    title:{{title}} selected:{{selected}}

    export default {

    name: "son",

    props: {

    selected: {

    type: Boolean

    },

    title: {

    type: String

    }

    },

    methods: {

    onClick() {

    this.$emit("update:selected", !this.selected); //关键点

    }

    }

    };

    .son {

    border: 1px solid red;

    }

    父亲方面

    在标签中监听 update事件,并将传过来的 $event付给 selected,这样就完成了一次传参。

    我是爸爸,下面是儿子

    import Son from "./son";

    export default {

    name: "father",

    components: {

    Son

    },

    data() {

    return {

    selected: true

    };

    }

    };

    简单方式

    .sync 修饰符

    我是爸爸,下面是儿子

    # $parents API

    儿子方面

    从 this.$parent中可以获取到 父组件 的 data 数据 ,直接进行修改,是不是很刺激。

    methods: {

    onClick() {

    this.$parent.selected = !this.$parent.selected;

    }

    }

    虽然刺激,但是,我建议调用父组件的函数,来切换状态。

    父亲方面

    //father.vueexport default {

    name: "father",

    components: {

    Son

    },

    data() {

    return {

    selected: true

    };

    },

    methods: {

    changeSelected() {

    this.selected = !this.selected;

    }

    }

    };

    儿子方面

    //son.vuemethods: {

    onClick() {

    this.$parent.changeSelected();

    }

    }

    # EventBus

    如果只是一个父亲,一个儿子上面的方法非常的简单实用,但是如果是祖孙三代传参呢?上面的方法就很麻烦了。

    具体怎么麻烦,可以看一下我的这篇文章,用原始的方法造 tabs轮子 :Storm4542:使用Vue做一个tabs轮子​zhuanlan.zhihu.com

    废话不多说,开始用 EventBus做一个简单的 tabs组件。

    #app.vue

    新闻

    汽车

    代码

    新闻列表

    汽车列表

    代码列表

    import Tab from "./components/tabs.vue";

    import TabItem from "./components/tab-item";

    import TabPane from "./components/tab-pane";

    export default {

    name: "app",

    components: {

    Tab,

    TabItem,

    TabPane

    }

    };

    # tabs.vue

    import TabItem from "./tab-item.vue";

    import Vue from "vue"; //引入VUE

    export default {

    name: "tab",

    props: {

    selected: {

    type: [Number, String]

    }

    },

    data() {

    return {

    eventBus: new Vue() // 创建 eventBus

    };

    },

    provide() {

    return {

    eventBus: this.eventBus // 提供 eventBus

    };

    },

    mounted() {

    this.eventBus.$emit("update:selected", this.selected);

    //发布消息,告诉大家,现在的selected是啥

    }

    };

    # tabs-item.vue

    export default {

    name: "tab-item",

    props: {

    name: {

    type: [String, Number]

    }

    },

    inject: ["eventBus"], //注入 eventBus

    data() {

    return {

    active: false

    };

    },

    created() {

    this.eventBus.$on("update:selected", newSelected => {

    this.active = this.name === newSelected;

    }); //接收消息,如果newselected 和我的 name 相同,那么我就被选中了

    },

    methods: {

    onClick() {

    this.eventBus.$emit("update:selected", this.name);

    //发布消息,如果点击了我,我就告诉大家,我被选中了

    }

    }

    };

    .active {

    color: red;

    }

    # tab-pane.vue

    export default {

    name: "tab-pane",

    props: {

    name: {

    type: [String, Number]

    }

    },

    data() {

    return {

    active: false

    };

    },

    inject: ["eventBus"],//注入 eventBus

    created() {

    this.eventBus.$on("update:selected", newSelected => {

    this.active = this.name === newSelected;

    });

    //接收消息,如果newselected 和我的 name 相同,那么我就被选中了

    }

    };

    .pane {

    color: red;

    }

    # 灵活运用 provide inject

    //father.vueexport default {

    name:'father',

    data(){

    return {

    someThing:'father'

    }

    },

    provide(){

    return {

    father:this

    }

    }

    }

    //son.vueexport default {

    name:'son',

    inject:['father'],

    methods:{

    onClick(){

    this.father.someThing = 'son'

    }

    }

    }

    展开全文
  • vue编程式导航,在这里我们必须要明白一个知识点,就是params和query传参的用法。   params传参,路径不能使用path,只能使用name,不然取不到传的数据。 this.$router.push({name:'Good',params:{goodsId:id}})...
  • Vue传参一箩筐

    2019-04-03 08:40:37
    Vue页面、组件之间传参方式繁多,此处罗列出常用的几种方式,欢迎审阅补充。一丶路由传参这里的路由传参以编程式router.push(...)为例,声明式<router-link :to="...">与之类似。此处模拟情景为从componentsA....
  • vue传参方式

    千次阅读 2018-08-01 10:00:20
    1.name传参 name传参在配置路由时要给路由起name,然后通过$route.name进行接收参数 2.router-link to传参(推荐) 路由跳转router-link相当于传统a标签跳转页面,利用router-link传参时,应绑定(v-bind)...
  • 总结以下vue传参两种方式的不同 1.params 利用params传参,参数不会暴露出来,但是这里需要注意,只能使用name,不能使用path this.$router.push({name:'Neslist',params:{Id:id}}) 取值 this.$route.params....
  • Vue组件 1、组件是什么? 是vue.js最强大的功能之一 可以扩展html元素,封装可重用的代码 2、注册全局组件 Vue.component('组件名称',引入的.vue文件) main.js import heads from 'src/heads'; Vue.component('...
  • 一、组件之间传参 详见:添加链接描述 二、路由传参 两种情况:params 和 query 都可以在目标组件的生命周期里,通过 this.$route 进行获取 methods:{ goTheme(item){ //点击图片跳转主题界面 // ...
  • vue-cli脚手架项目中,我们通常遇过发送axios请求,后台接受不到数据,试了下ajax请求,后台便可以接收到数据,对比两者的请求,发送有一点区别,就是请求参数的区别//利用axios拦截器来进行转换,只需要转换一次...
  • vue 传参获取数据

    2020-03-25 10:22:01
    首先是通过getOptions方法从数据库获取到所有的轮播类型 <el-form-item> <el-select @change="getOptions" v-model="type" placeholder="请选择轮播类型" style=""> <el-option v-for="(item,index...
  • vue获取地址栏的参数和传参 获取参数: this.$route.query.user_id 传参:this.$route.push({path:’/login’,query:{user_id:id})
  • vue传参的几种方式

    2019-07-19 08:59:20
    从一个页面传参到另一个页面 路由传参 步骤:1.首先我在home.vue中定义 updatas(id):指事件 id:传的参数 updates(id){ this.$router.push({ path:'/world', name:'world', params:{ ...
  • vue传参、嵌套路由

    2019-01-13 13:39:39
    传参:   嵌套路由: 运行结果:   需求:到我的音乐界面需要登录     编程导航 1:跳到指定的锚点,并显示页面 this.$router.push({ name:'***',query:{id:1},paras:{name...
  • 在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据。今天经过总结,解决了这个问题。通过了一下几种情况进行传值: 通过路由params...
  • vue 传参(原创)

    2018-06-29 00:35:35
    文件目录结构 !... router >> index.js ``` {   path: '/Page8',   ...App.vue ...表示当浏览器路径跳到page8是,即路径为/page8时,vue的属性$route 的 属性params 的值就获得为{zh:'qiwei',mima:'asdf342'}
  • vue传参==编码+解码

    2021-01-08 16:03:34
    编码 this.$router.push({path:'/query',query:{data:encodeURIComponent(data)}}) 解码 this.tableData=decodeURIComponent(this.$route.query.data) 地址栏效果:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,166
精华内容 2,866
关键字:

vue传参

vue 订阅