2***@qq.com
2***@qq.com
  • 发布:2023-05-23 15:53
  • 更新:2023-05-23 16:44
  • 阅读:289

子组件修改值后,父组件原始数据自动变了

分类:uni-app
<template>  
    <view>  
        <block v-for="(item,index) in linePosArr" :key="index">  
            <animation :itemBox='item'></animation>  
        </block>  
    </view>  
</template>  

<script>  
    import uiFeedback from '@/utils/uifeedback'  
    import animation from '@/components/cartAnimationChildren/animation'  
    export default {  
        name: 'cart-animation',  
        components: {  
            animation  
        },  
        data() {  
            return {  
                linePosArr:[],//坐标列队动画坐标  
            }  
        },  
        methods:{  
            //点击商品触发的事件  
            touchOnGoods: function(e,busPos) {  
        let that = this;  
                console.log(e, '进入动画')  
                if(busPos){//是否自定义掉落坐标  
                    this.busPos = busPos  
                }  
                var cell = {  
                    finger:{  
                        x: e.detail.x-10,  
                        y: e.detail.y-10,  
                    },//点击的位置坐标  
                    linePos:{  
                        x: busPos.x,  
                        y: busPos.y,  
                    }, //运动轨迹  
                    xYidong:'', //运动的x坐标  
                    yYidong:'', //运动的Y坐标  
                this.linePosArr.push(cell)  
        console.log('开始数组',this.linePosArr) // 这里打印出现的数据是子组件修改后的数据(图一)  
            },  
        }  
    }  
</script>  

子组件  
<template>  
    <!-- 加入购物车动画 -->  
    <view>  
        <view class="good_box" :style="'transform: translateX('+items.xYidong+')'">  
            <view class="i-yuanquanquan" :style="'transform: translateY('+items.yYidong+')'"></view>  
        </view>  
    </view>  
</template>  

<script>  
    import uiFeedback from '@/utils/uifeedback'  
    export default {  
        props: {  
            itemBox: {  
                type: Object,  
                default: function() {  
                    return { };  
                }  
            }  
        },  
        data() {  
            return {  
                items: {},  
            }  
        },  
        mounted(e) {  
            console.log('接收的值',this.itemBox)  
            this.items = this.itemBox;  
            this.start()  
        },  
        methods:{  
            start() {  
                let that = this;  
                console.log('赋值当前data',this.items)  

                this.items.xYidong = `${this.items.finger.x}px`;  
                this.items.yYidong = `${this.items.finger.y}px`;  
            },  
        }  
    }  
</script>

图一

2023-05-23 15:53 负责人:无 分享
已邀请:
YUANRJ

YUANRJ

因为你的数据是引用数据类型,解决方案把原始数据拷贝一下。

  • 2***@qq.com (作者)

    我在子组件mounted事件赋值新的字段不行嘛

    mounted(e) {

    console.log('接收的值',this.itemBox)

    this.items = this.itemBox;

    this.start()

    },

    2023-05-23 16:26

  • YUANRJ

    回复 2***@qq.com: 建议了解一下js的数据类型

    2023-05-23 16:37

  • 2***@qq.com (作者)

    回复 YUANRJ: 好的,谢谢

    2023-05-24 06:08

Diligent_UI

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序

不太明白你说的什么意思

  • 2***@qq.com (作者)

    就是上面代码里面打印“开始数组”那里,里面的xYIdong和yYidong两个字段,都应该是空的才对,因为我是在子组件里面给这两个字段赋值,父组件的xYidong和yYidong的值变成了子组件赋值的数据,我在下面上传一下截图

    2023-05-23 16:43

2***@qq.com

2***@qq.com (作者)

要回复问题请先登录注册