首页 > 移动平台 > 详细

关于uni-app父子页面的传值

时间:2020-05-31 12:28:49      阅读:216      评论:0      收藏:0      [点我收藏+]

1.父传子

Father.vue

<template>
    <view>
        <Son :toSonData="toSonData"></Son>
    </view>
</template>
<script>
import Son from "./Son.vue";
export default{
    data(){
        return{
            toSonData:"给子页面的信息"
        }
    },
    components:{
        Son
    }
}
</script>

Son.vue

<template>
    <view>
        父页面给的信息{{toSonData}}
    </view>
</template>
<script>
export default{
    props:["toSonData"],//第一种接收方式
    props:{//第二种接收方式
        toSonData:{
            type:string,
            default:function(){
                return ‘‘
            }
        }
    }
}
</script>

2.子传父

Son.vue

<template>
    <view>
        <view @click="toFatherData"></view>
    </view>
</template>
<script>
export default{
    methods:{
        toFatherData(){
            this.$emit("toFatherData","子页面给父页面的信息")
        }
    }
}
</script>

Father.vue

<template>
    <view>
        <Son @toFatherData="sendFatherData"></Son>
    </view>
</template>
<script>
import Son from "./Son.vue"
export default{
    data(){
        return{
            sendFatherData:""
        }
    },
    components:{
        Son
    },
    methods:{
        sendFatherData(data){
            this.sendFatherData=data;
        }
    }
}
</script>

 

关于uni-app父子页面的传值

原文:https://www.cnblogs.com/joesmile/p/12996641.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!