子组件模板：test.vue

<template>
    <view>
        子组件
    </view>
</template>

<script>
    export default {
        data () {
            return {
                
            }
        }
    }
</script>

父组件模板：index.vue

<template>
    <view>
        父组件
        <test></test>
    </view>
</template>

<script>
    import test from '../../components/test.vue'
    export default {
        data () {
            return {
                
            }
        },
        methods: {
            
        },
        components:{
            test
        }
    }
</script>

1.父=>子（父组件给子组件传递数据）

父组件：index.vue

<template>
    <view>
        父组件
        <test :poetry="poetry"></test>
    </view>
</template>

<script>
    import test from '../../components/test.vue'
    export default {
        data () {
            return {
                poetry:'昨夜星辰昨夜风,画楼西畔桂堂东。'
            }
        },
        methods: {
            
        },
        components:{
            test
        }
    }
</script>

子组件：test.vue

<template>
    <view>
        子组件:{{poetry}}
    </view>
</template>

<script>
    export default {
        props:['poetry'],
        data () {
            return {
                
            }
        }
    }
</script>

预览：

2.子=>父 （子组件给父组件传值）

子组件：test.vue

<template>
    <view>
        子组件:
        <button type="default" @tap="sendInfo()">发送信息</button>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                title: '今天天气不错！'
            }
        },
        methods:{
            sendInfo:function(){
                this.$emit('send',this.title)
            }
        }
    }
</script>

父组件：index.vue

<template>
    <view>
        父组件:{{showTitle}}
        <test @send="getInfo"></test>
        <!-- <test @send="getInfo()"></test> 多了小括号是undefined -->
    </view>
</template>

<script>
    import test from '../../components/test.vue'
    export default {
        data () {
            return {
                showTitle:''
            }
        },
        methods: {
            getInfo:function(title){
                console.log(title)
                this.showTitle = title
            }
        },
        components:{
            test
        }
    }
</script>

效果预览：

子=>父 总结：

子组件想要给父组件传值，需要绑定事件处理函数，
然后使用$emit()进行触发通知，告诉父组件，我要发送数据了，记得签收，
$emit()接受2个参数，第一个参数：事件处理函数的事件名称，第二个参数：传递的数据。

父组件想要接收子组件的传过来的值，需要在注册的子组件上通过@符
绑定在子组件$emit()里面事件处理函数的名称，然后再命一个新的事件处理函数。

在methods定义，再使用形参来接收。

把子组件传递过来的数据做一个保存，然后渲染在视图层上。

3.兄弟组件传值

组件模板准备：
子组件1：testA.vue
子组件2：testB.vue
父组件页面：index.vue

testA.vue

<template>
    <view class="border">
        子组件：testA页面
        <button type="primary">修改子组件:testB的值</button>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                
            }
        },
        methods:{
            
        }
    }
</script>

<style>
    .border {
        border: 20upx solid;
        margin: 10upx;
    }
</style>

testB.vue

<template>
    <view>
        这是子组件testB页面:{{num}}
    </view>
</template>

<script>
    export default {
        data() {
            return {
                num:0
            }
        },
    }
</script>

index.vue

<template>
    <view>
        <testA></testA>
        <testB></testB>
    </view>
</template>

<script>
    import testA from '../../components/testA.vue'
    import testB from '../../components/testB.vue'
    export default {
        data () {
            return {
                
            }
        },
        methods: {
            
        },
        components:{
            testA,
            testB
        }
    }
</script>

界面预览：

实现功能介绍：
点击子组件testA.vue的button按钮去触发事件，然后修改testB.vue子组件的num值

具体功能实现：

子组件testA.vue通过按钮绑定一个addNum事件，再通过在method定义中的addNum事件触发uni.$emit()函数，向子组件testB.vue发送信息，传递参数过去。

<template>
    <view class="border">
        子组件：testA页面
        <button type="primary" @tap="addNum">修改子组件:testB的值</button>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                
            }
        },
        methods:{
            addNum:function(){
                uni.$emit('updataNum',10)
            }
        }
    }
</script>

testB.vue组件，在created生命周期中（这一阶段，组件已经创建完成），通过uni.$on()进行监听，收到testA.vue发送过来的消息，并接收参数，做出回应，然后去更改自己的num值。

<template>
    <view>
        这是子组件testB页面:{{num}}
    </view>
</template>

<script>
    export default {
        data() {
            return {
                num:0
            }
        },
        created() {
            uni.$on('updataNum',num => {
                this.num += num
            })
        }
    }
</script>

效果预览：

兄弟组件通讯：总结：

一端使用uni.$emit()发送数据，将自己的信息发射出去，
另一端要使用uni.$on()进行监听接收,拿到数据。