501468940@qq.com
501468940@qq.com
  • 发布:2019-04-17 10:27
  • 更新:2019-04-18 17:08
  • 阅读:629

【报Bug】父组件传递对象到子组件,子组件改变对象属性的值,父组件不会修改

分类:HBuilderX

详细问题描述

父组件传递对象到子组件,子组件改变对象属性的值,父组件不会修改

在1.8版本中可以同步修改
在1.9.1就不会同步修改

[内容]

[步骤]

[结果]

[期望]

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

[IDE版本号]
1.9.1

[windows版本号]

win10

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

[编译模式是老模板模式还是新的自定义组件模式?]

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]

2019-04-17 10:27 分享
已邀请:
Trust

Trust - 少说废话

合理的方案,通过 sync 指令与事件来处理 props 的通信:
父(即页面)

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view @click="info.number++">  
            <text class="title">{{title}}</text>  
        </view>  
        <child :info.sync="info"></child>  
    </view>  
</template>  

<script>  
    import child from '@/cmpt/child.vue'  
    export default {  
        components: {  
            child  
        },  

        data() {  
            return {  
                title: 'Hello',  
                info: {  
                    number: 1  
                }  
            }  
        },  
        onLoad() {  

        },  

        methods: {  

        }  
    }  
</script>

子(即组件)

<template>  
    <view @click="dEvent">  
        <text>Child Component {{info.number}}</text>  
    </view>  
</template>  

<script>  
    export default {  
        props: {  
            info: {  
                type: Object,  
                default () {  
                    return {};  
                }  
            }  
        },  
        methods: {  
            dEvent() {  
                this.info.number++  
                this.$emit('update:info', this.info);  
                console.log(JSON.stringify(this.info))  
            }  
        }  
    }  
</script>  

<style>  
</style>
Trust

Trust - 少说废话

补充一个最简的测试项目,方便测试重现下问题。

501468940@qq.com

501468940@qq.com (作者) - 501468940

<template>  
    <view @click="dEvent">  
        <text>Demo Component {{info.number}}</text>  
    </view>  
</template>  

<script>  
    export default {  
        props: {  
            info: {  
                type: Object,  
                default() {  

                }  
            }  
        },  
        methods: {  
            dEvent() {  
                this.info.number++  
                console.log(JSON.stringify(this.info))  
            }  
        }  
    }  
</script>  

<style>  
</style>

/pages/index/index.vue 引用

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view @click="info.number++">  
            <text class="title">{{title}}</text>  
        </view>  
        <demo :info="info"></demo>  
    </view>  
</template>  

<script>  
    import Demo from '@/components/app/Demo.vue'  
    export default {  
        components: {  
            Demo  
        },  

        data() {  
            return {  
                title: 'Hello',  
                info: {  
                    number: 1  
                }  
            }  
        },  
        onLoad() {  

        },  

        methods: {  

        }  
    }  
</script>
  • Trust

    压缩一下,上传下附件。

    2019-04-18 12:43

  • Trust

    然后描述下操作步骤,以及预期的结果。

    2019-04-18 12:43

501468940@qq.com

501468940@qq.com (作者) - 501468940

1.直接新建一个uni-app 使用默认模板

  1. 创建一个Demo.vue 的子组件
  2. 在 /pages/index/index.vue 引用这个子组件,并传入一个对象。
  3. 父组件和子组件都做一个更改这个对象的中 number 的值

预期的结果:

子组件中能够同时更改并渲染。

测试结果:

当父组件 自身加 1 时,子组件没办法更新。 H5 中能达到预期效果,但是在 运行到手机时没办法达到预期。在1.8版本中这都是没有问题的。1.9以后就不行了。 测试 Iphone 8P 和 华为手机都不行。

  • Trust

    "usingComponents": false 下支持,自定义组件模式下目前不支持。

    2019-04-18 13:01

Trust

Trust - 少说废话

建议调整下写法,改为在 methods 中处理:

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view @click="test">  
            <text class="title">{{title}}</text>  
        </view>  
        <demo :info="info"></demo>  
    </view>  
</template>  

<script>  
    import demo from '@/cmpt/demo.vue'  
    export default {  
        components: {  
            demo  
        },  
        data() {  
            return {  
                title: 'Hello',  
                info: {  
                    number: 1  
                }  
            }  
        },  
        onLoad() {  

        },  

        methods: {  
            test() {  
                console.log('click');  
                this.info.number++  
            }  
        }  
    }  
</script>
501468940@qq.com

501468940@qq.com (作者) - 501468940

配置以后确实可以了,1.9 是不是你们就调整了 usingComponents 默认为true ,1.8 为 false ?

  • Trust

    1.8 就没有这个配置,1.9 开始支持的自定义组件模式。https://ask.dcloud.net.cn/article/35818

    2019-04-18 13:48

  • 501468940@qq.com (作者)

    回复 Trust: 自定义组件模式下大概会在什么时候支持这个 ?

    2019-04-18 14:06

要回复问题请先登录注册