vue:页面跳转和传参(页面之间,父传子,子传父)

时间:2023-03-09 01:32:25
vue:页面跳转和传参(页面之间,父传子,子传父)

1、返回上一个页面:
  A、<a @click="$router.back(-1)" class="btn">重新加载</a>

  B、this.$router.push("tolink")

2、事件中路由跳转,兄弟组件之间传值:

  this.$router.push({

    path:'/world',

    name:'world',

    params:{

      id:id

    }

  })

  在另一个页面中获取这个参数

    this.$router.params.id

  

3、父组件传参给子组件

  父组件引入子组件并注册

    import EquipmentdataDetails from './equipmentdata/EquipmentdataDetails'

    components: {'equipmentdata-details':EquipmentdataDetails,},

    <equipmentdata-details :toDeviceUnique=deviceUniqueTo></equipmentdata-details>

  子组件中提前生命props

     props: ['toDeviceUnique'],

4、子组件传参给父组件

  父组件中引入并使用子组件,并提前声明一个方法

    import EquipmentdataDetails from './equipmentdata/EquipmentdataDetails'

    components: {'equipmentdata-details':EquipmentdataDetails,},

    <equipmentdata-details @test=test></equipmentdata-details>

    function test(data){ console.log(data) }

  子组件中

    this.$emit.('test',123)

  这样子组件就调用了父组件的方法,并传了一个参数过去,父组件收到这个参数就能做一些操作