父页面 index.vue 主要看的是 @Tranfunx 及绑定的函数 ReceiveData

<template>
    <div id="index">
        <haaaa @Tranfunx='ReceiveData'></haaaa>
    </div>
</template>R
<script>
    // 导入子页面
    import childs from '@/components/child.vue'
    export default {
        name: "index",
        components:{
            childs
        },
        setup(){
            // 接收子页面传输的元素
            const ReceiveData = (data) => {
                console.log(data)
            }
            return {
                ToData
            }
        }
    }
</script>

子页面 child.vue 主要是 context.emit(funx,datas) 这里等同于 vue2 中 this.$emit

<template>
    <div id="childs">
        <div @click="SendData">向父页面发送数据</div>
    </div>
</template>
<script>
    export default {
        name: "childs",
        setup(pros,content){
            // 接收子页面传输的元素
            const SendData = () => {
                // 这里的 Tranfunx 就是父元素中的绑定
                context.emit('Tranfunx','发送的数据')
            }
            return {
                SendData
            }
        }
    }
</script>

Logo

前往低代码交流专区

更多推荐