uni-app-组件通信

零。官方文档

一。父组件给子组件传值

父组件

<template>
    <view class="content">
        <login :title="title"></login>
    </view>
</template>

<script>
    import login from '../../components/login/login.vue'
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {},
        components: {
            login
        }
    }
</script>

子组件

<template>
    <view>
        <view>组件</view>
        <view>{{title}}</view>
    </view>
</template>

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

二。子组件给父组件传值 $emit()

父组件

<template>
    <view class="content">
        <login :title="title" @myEvem="get_num"></login>
        {{num}}
    </view>
</template>

<script>
    import login from '../../components/login/login.vue'
    export default {
        data() {
            return {
                title: 'Hello',
                num: 0
            }
        },
        methods: {
            get_num(num) {
                console.log("收到")
                console.log(num)
            }
        },
        components: {
            login
        }
    }
</script>

子组件

<template>
    <view>
        <view>组件</view>
        <view>{{title}}</view>
        <button @click="send_father">send_father</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                intId: null,
                num: 3
            };
        },
        props: ['title'],
        methods: {
            send_father() {
                console.log("开始传值")
                this.$emit('myEvem', this.num)
            }
        },
        created() {
            console.log("1")
            this.intId = setInterval(() => {
                console.log("执行定时器")
            }, 1000)
        },
        destroyed() {
            clearInterval(this.intId)
        }
    }
</script>

三。兄弟组件通讯

login.vue

<template>
    <view>
        <view>组件</view>
        <view>{{title}}</view>
        <button @click="send_father">send_father</button>
        <button @click="update_register">update_register</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                intId: null,
                num: 3
            };
        },
        props: ['title'],
        methods: {
            send_father() {
                console.log("开始传值")
                this.$emit('myEvem', this.num)
            },
            update_register() {
                uni.$emit('update_num', 10)
                console.log()
            }
        },
    }
</script>

register.vue

<template>
    <view>
        注册:{{from_login}}
    </view>
</template>

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