• vue-router2.0 组件之间传参及获取动态参数


    1.标签

    <li v-for=" el in hotLins" >
        <router-link :to="{path:‘details‘,query: {id:el.tog_line_id}}">
            <img :src="el.image_list[0]">
            <h3>{{el.tourism_name}} {{el.tog_line_id}}</h3>
            <p>{{el.address}}</p>
        </router-link>
    </li>
    2.在组件中,需要传动态参数时,可以如上例子 
    <router-link :to="{path:‘details‘,query: {id:el.tog_line_id}}">

    3.query中的参数id就是要传的参数,在组件中获取的方法为:
    created: function() {
        var id = this.$route.query.id;
        this.getData(id);
     },
    4.如上述,this.$route.query.id就可以获取该参数,也可以通过,this.$root.id = id;传给父组件,父组件中通过
    // 根组件构造器
        var vm = Vue.extend({
          router: router,
          data: function() {
            return {
              id: ‘11484‘ //城会玩明细id
            }
          }
        })
    5.定义data中的id,然后子组件中用props传递参数
    props: {
            id: {
              type: String,
              required: true
            }
          },
    6.router-view中,传递该参数:
    <router-view :id="id" :order-info="orderInfo">
    </router-view>

    注意orderInfo时,在这边用的是:order-info
    该内容为抄袭,因为自己试了好用,只是拿到自己这方便忘了的时候查看。
     
  • 相关阅读:
    Java自学-多线程 常见线程方法
    Java自学-多线程 启动一个线程
    Java自学-Lambda 聚合操作
    Java自学-Lambda 方法引用
    Java自学-Lambda 概念
    Java自学-泛型 泛型转型
    Java自学-泛型 通配符
    Java自学-泛型 支持泛型的类
    <VCC笔记> 关于Assertion
    <VCC笔记>VCC简介与安装
  • 原文地址:https://www.cnblogs.com/itbainianmei/p/6257357.html
Copyright © 2020-2023  润新知