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

时间:2020-05-31 12:28:49   收藏:0   阅读:221

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>

 

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

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!