Vue页面传值方式总结

1.父子组件传值

• 父组件通过components引入子组件,子组件通过props接收
• 子组件通过调用父组件方法实现通信 this.$emit(…）

父组件

<template>
  <div>
    <parent>
      <child 
      :value="msg"
      @func="show">
      child>
    parent>
  div>
template>
<script>
import Child from "..."
export default {
  data () {
    return {
      msg:'父组件的值传给子组件'
    }
  },
  components: {Child},
  methods: {
  	show(msg){
  	console.log(msg)
  	}
  }
}
script>

子组件

<template>
  <div>
    <p>这是子组件 -> 获得值:{{value}}p>
    <br>
    <button @click="clickEvent">点击按钮button>
  div>
template>
<script>
export default {
  data () {
    return {
       msg:"子组件的消息"
    }
  },
  components: {},
  props: ['value'],
  mounted () {},
  methods: {
  clickEvent(){
  this.$emit('func',this.msg);
   }
  }
}
script>

2.路由跳转时传参

• 传参是 router ， 接收参数是 route !
• 传参是 router ， 接收参数是 route !
• 传参是 router ， 接收参数是 route !

2.1 router-link to不传参 -> :to传参

       <router-link :to="'/url/' + id"> <router-link/>

• js中参数接收

   id: this.$route.params.id

2.2 编程式页面跳转

        this.$router.push("home:)       前往/home的页面

• push、replace区别
  push 可以返回上一步 replace 不能

编程式页面跳转时传参

params 传参 : 相当于post请求，页面跳转时参数不会在地址栏中显示

 this.$router.push({
     name:'home',
     params: { id:idParams }
 })

• 接收参数：

this.$route.params.id

query 传参 : 相当于get请求，页面跳转时参数会在地址栏中显示

this.$router.push({
    name:'home',
    query: { id:idParams }
})

接收参数：

this.$route.query.id