vue组件间传值

Posted littleBit

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

<template>  
   <div id="app">  
       <child :childMessage="content"></child>  
   </div>  
</template>  

<script>  
import child from ‘./components/Child‘  
export default {  
    name : ‘app‘  
    components:{  
        child
    }
    data(){
        return {
            content:‘Send Message to Child‘
        }
    }
</script> 

子组件Child.vue

<template>  
   <div>  
       <h2>child子组件部分</h2>  
       <p>{{childMessage}}</p>  
   </div>  
</template>  
  
<script>  
export default {  
    //方式1
    props: [‘childMessage‘]
    //方式2
    props: {
         childMessage: String  //指定类型
    }
    //方式3
    props : {
        childMessage:{
            type:String, //指定类型,常用类型有 String Number Object Boolean...
            default:‘‘
        },
    }
}  
</script>   

3.2子组件给父组件传值

父组件App.vue

<template>  
    <child @showMessage="show" :message="message"></child> //监听子组件触发的showMessage事件,然后调用show方法
</template>  

<script>
methods: {
    show(message) {
        this.message = message;
    }
}
</script>

子组件Child.vue

<template>
    <div @click="sendMessage"></div>
</template>

<script>
methods: {
   sendMessage() {
        this.$emit(‘showMessage‘,‘Send Message to Father‘); //触发showbox方法,‘the msg‘为向父组件传递的数据
    }
}
</script>

以上是关于vue组件间传值的主要内容,如果未能解决你的问题,请参考以下文章

vue的父子组件间传值以及非父子间传值

Vue中组件间传值常用的几种方式

Vue3组件(18)组件间传值/共享的方法的汇总

你了解Vue组件间传值五大场景吗?

你了解Vue组件间传值五大场景吗?

vue组件间传值