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

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>

 

posted @ 2020-05-31 10:35  joesmile  阅读(3042)  评论(0编辑  收藏  举报