美文网首页
uniapp-组件通讯

uniapp-组件通讯

作者: hszz | 来源:发表于2021-08-21 01:31 被阅读0次

    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

    相关文章

      网友评论

          本文标题:uniapp-组件通讯

          本文链接:https://www.haomeiwen.com/subject/gyfciltx.html