uniapp-组件通讯

1.父传子

prop

• 属性绑定， 子组件通过prop属性childrenData可以接受到父组件中绑定的值:childrenData

<!-- 父组件 hsz—test -->
<template>
    <view>
        <view class="">
            <view class="">
                父组件fatherData:{{fatherData}}
            </view>
            <!-- 子组件 -->
            <hsz-test-component :childrenData="fatherData"></hsz-test-component>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                fatherData: 'hszz-fatherData',
            }
        },
    }
</script>

<!-- 子组件 hsz-test-component -->
<template>
    <view>
        <view class="">
            <view>子组件childrenData: {{childrenData}}</view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "hsz-test-component",
        props: {
            childrenData: {
                type: String, // 类型
                default: '', // 默认值
            }
        },
    }
</script>

2.子传父

this.$emit(funcName, val)

• 事件传递，funcName：事件名， val：值

<!-- 父组件 hsz—test -->
<template>
    <view>
        <view class="">
            <!-- 绑定子组件事件，接收子组件值 -->
            <hsz-test-component @handleChange="changeName"></hsz-test-component>
            <view class="">
                {{name}}
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                name:'',
            }
        },
        methods: {
            changeName(name) { // name形参是子组件中传入的值
                this.name = name
            }
        }
    }
</script>

<!-- 子组件 hsz-test-component -->
<template>
    <view>
        <!-- 子组件设置 -->
        <view class="">
            子组件
        </view>
    </view>
</template>

<script>
    export default {
        name: "hsz-test-component",
        data() {
            return {
                name: 'hszz'
            };
        },
        mounted() {
            // 通过事件传递给父组件
            this.$emit('handleChange', '我是子组件传给父组件的值：' + this.name)
        }
    }
</script>

image.png

3.

$refs $children $parent

• 父组件访问子组件

  • this.$children[0]

    • this.$children是一个数组，包含使用子组件，可通过索引选择组件

  • this.$refs.comhsz

• 子组件访问父组件
  • this.$parent

<!-- 父组件 hsz—test -->
<template>
    <view>
        <view class="">
            <view class="">
                父组件 {{name}}
            </view>
            <hsz-test-component ref="comhsz"></hsz-test-component>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                name: '',
            }
        },
        methods: {
            changeName() {
                this.name = '子组件调用父组件方法 hszz-c'
            },

            // 父组件调用子组件两种方法
            // this.$children
            fatherChange() {
                this.$children[0].changeName()
            },
            // this.$ref 需要在子组件设置ref="comhsz"
            fatherChangeRef() {
                this.$refs.comhsz.changeName()
            }
        },
        mounted() {
            //this.fatherChange()
            this.fatherChangeRef()
        }
    }
</script>

<!-- 子组件 hsz-test-component -->
<template>
    <view>
        <!-- 子组件设置 -->
        <view class="">
            子组件 {{cName}}
        </view>
    </view>
</template>

<script>
    export default {
        name: "hsz-test-component",
        data() {
            return {
                cName: ''
            };
        },
        methods: {
            changeName() {
                this.cName = '父组件调用子组件方法 hszz-c'
            },
            
            // 子组件调用父组件方法
            childrenChange() {
                this.$parent.changeName()
            }
        },
        mounted() {
            this.childrenChange()
        }
    }
</script>

image.png