uniapp：组件间传值

组件间传值的情况：

• 子组件→父组件

• 父组件→子组件

• 普通组件→普通组件

1、父组件→子组件 father.vue

<template>
    <view>
        <view>这是父组件</view>
        <son :title='title' :content='content'></son>
    </view>
</template>

<script>
    import son from './son.vue'
    export default {
        data() {
            return {
                title: '这是标题',
                content: '这是内容'
            }
        },
        components:{
            son
        }
    }
</script>

son.vue

<template>
    <view class="box">
        <view>这是子组件</view>
        <text>父组件传来的参数：{{title}} ~~ {{content}}</text>
    </view>
</template>

<script>
    export default {
        props:['title', 'content']
    }
</script>

<style>
    .box{
        color: #DD524D;
    }
</style>

2、子组件→父组件 son.vue

<template>
    <view class="box">
        <view>这是子组件</view>
        <!-- 向父组件传值 -->
        <button @click="toFather" type="warn" size="mini">点击向父组件传值</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                text: 'son给father的内容'
            }
        },
        methods:{
            toFather() {
                this.$emit('sonEven', this.text)
            }
        }
    }
</script>

<style>
    .box{
        color: #DD524D;
    }
</style>

father.vue

<template>
    <view>
        <view>这是父组件</view>
        <son @sonEven='getSonText'></son>
        <text style="size: 20rpx;color: #007AFF;">{{fromSon}}</text>
    </view>
</template>

<script>
    import son from './son.vue'
    export default {
        data() {
            return {
                fromSon: ''
            }
        },
        methods:{
            getSonText(pram) {
                this.fromSon = pram
            }
        },
        components:{
            son
        }
    }
</script>

3、兄弟组件传值

uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等

使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听

在b.vue中引入a.vue

a.vue

<template>
    <view class="box">
        <view>这是a组件</view>
        <button type="warn" @click="sendToB">a向b传值</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                msg: '这是a向b传送的内容'
            }
        },
        methods:{
            sendToB() {
                uni.$emit('aEven', this.msg)
            }
        }
    }
</script>

<style>
    .box{
        background-color: #DB7093;
        border: 1px solid #DB7093;border-radius: 10rpx;
        width: 50%;height: 50rpx;
    }
</style>

b.vue

<template>
    <view>
        <view class="b">这是b组件</view>
        <A></A>
    </view>
</template>

<script>
    import A from './a.vue'
    export default {
        components:{
            A
        },
        created() {
            // 监听
            uni.$on('aEven', data=>{
                console.log('a组件传来的数据：', data)
            })
        }
    }
</script>

<style>
    .b{
        background-color: #5F9EA0;
        border: 1px solid #5F9EA0;border-radius: 10rpx;
        width: 90%;height: 100rpx;
    }
</style>