vue组件传值

---

1、通过路由传值

A组件通过params把参数传递给B组件（触发事件可以是点击事件、钩子函数）

let params = {
        amount      :item.amount,           //金额
        payment     :item.payment,          //交易方式
        code        :item.code,             //商家代码
        serial_num  :item.serial_num,       //流水号
    }
this.$router.push({path:'/income/detail',name:'incomeDetail',params:params})

在B组件获取A传递过来的值

let params = this.$route.params

2、通过Session Storage缓存的形式传值

在A组件中设置缓存

const orderData = {'orderId':123456,'price':100}
sessionStorage.setItem('缓存名称',JSON.stringify(orderData))

在B组件中获取缓存

const data = JSON.parse(sessionStorage.getItem('缓存名称'))

3、父子组件传值

原理：父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。

父子传值原理图

3.1 父组件给子组件传值props

父组件App.vue

子组件Child.vue

3.2子组件给父组件传值

父组件App.vue

子组件Child.vue