关于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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM