uniapp与vue父子组件通信的对比

vue版：

子组件：
<template>
    <text>我是test组件{{msg}}</text>    
    <text :msg = "msg" @click= "test"></text>
</template>
<script>
    export default{
        props:['msg'],
        data(){
            return{
                
            }
        },
        methods:{
            test(){
                this.$emit("textShowName",{name:'123'})
            }
        }
    }
</script>

父组件：
<template>
    <view class="content">
        <test class="msg" @testShowName="testEvent"></test>
    </view>
</template>
<script>
    import test from "XXX路径XXX"
    export default{
        components:{
            test
        },
        data(){
            return{
                msg:"我是父组件的值"
            }
        },
        methods:{
            testEvent(rel){
                console.log(rel)
            }
        }
    }
</script>

uniapp版：

子组件：
<template>
    <text>我是test组件{{msg}}</text>    
    <text :msg = "msg" @click= "test"></text>
</template>
<script>
    export default{
        props:['msg'],
        data(){
            return{
                
            }
        },
        methods:{
            test(){
                uni.$emit("testEmit",{name:'123'})
            }
        }
    }
</script>

父组件：
<template>
    <view class="content">
        <test class="msg" @testShowName="testEvent"></test>
    </view>
</template>
<script>
    import test from "XXX路径XXX"
    export default{
        components:{
            test
        },
        data(){
            return{
                msg:"我是父组件的值"
            }
        },
        onLoad(){
            uni.$on("testEmit",(rel) => { //注册组件
                console.log(rel)
            })
        }
        methods:{
            
        }
    }
</script>

这两种方法在uniapp中都可以正常使用，显示的效果一样。只是在uniapp中多了一个uni.$on()与uni.$emit()两个API，更加方便一点

追求使人充实，分享让人快乐