请稍等 ...

多个子组件使用父组件的传入的值，结果不正确。

我的代码是按照老师写的，先用props接收父组件的值，然后在data里面重新定义了一个值，修改了一个组件里面的值之后，另外一组件里面也会跟着变。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
    <counter :count="obj"></counter>
    <counter2 :count="obj"></counter2>
</div>
<script>
    var counter  = {
        props:['count'],
        data : function () {
            return {
                user:this.count
            }
        },
        template : "<div @click='handleClick'>{{user}}</div>",
        methods : {
            handleClick:function () {
//                this.count ++;
               console.log('counter');
                this.user.name ='counter';
            }
        }
    };
    var counter2  = {
        props:['count'],
        data : function () {
            return {
                user:this.count
            }
        },
        template : "<div @click='handleClick2'>{{user}}</div>",
        methods : {
            handleClick2:function () {
//                this.count ++;
                console.log('counter2');
                this.name.name ='counter2';
            }
        }
    };
    var vm = new Vue(
        {
            el: '#app',
            data: {
                msg: "hello world",
                obj:{"name":"nhy"}
            },
            components: {
                counter,
                counter2,
            }
        }
    );
</script>
</body>
</html>

zhxs_nn 2018-12-10 23:32:26

源自：4-2 父子组件间的数据传递

399

收起

提交取消

1回答

Dell 2018-12-10 23:37:08

你传递的是一个对象作为参数，是引用类型，需要做深拷贝，而不是浅拷贝

0 回复有任何疑惑可以回复我~

收起回答

提问者 zhxs_nn #1
```
怎么深拷贝呢老湿
```
回复有任何疑惑可以回复我~ 2018-12-10 23:42:00
Dell 回复提问者 zhxs_nn #2
```
JSON.parse(JSON.stringify(对象))
```
回复有任何疑惑可以回复我~ 2018-12-16 22:05:40