vue 父组件数据修改，子组件数据未修改

页面：

父组件  <myfeedback></myfeedback>  子组件  <news></news> 

myfeedback.vue

<template>
    <div>
        <news :newInfo="info"><news>
        <div @click="infoChange">按钮</div>
    </div>
</template>

<script>
　　import news from 'xxxxx'
export default {
    name: "myfeedback",
    data() {
        return {
            info: {
                data1: 115             }
        }
    },

　　　　　　components: {

　　　　　　　　news

　　　　　　},

    methods: {
        infoChange() {
            this.info.data1++
        }
    }
};
</script>

news.vue

<template>
    <div>
        <div>{{dataOne}}将父组件数据赋值给子组件数据，数据仅在mounted中渲染，父组件数据改变子组件数据不改变，需要用watch监听</div>
        <div>{{newInfo.dataOne}}直接使用父组件传递的数据，父组件数据改变子组件改变</div>
    </div>
</template>

<script>
export default {
    name: "news",
    props: {
        newInfo: {
            type: Object
        }
    },
    watch: {
        newInfo: {
            handler(newValue, oldValue){
                this.newInfo = newValue
            },
            deep:true
        }
    },
    data() {
        return {
            dataOne: 0
        }
    },
    mounted() {
        this.dataOne = this.newInfo.dataOne;
    }
};
</script>

ps:

1. 父组件传的值在子组件中数据仅展示，可直接使用父组件传的值，不用在子组件data中重新定义值

2. 子组件要修改父组件的传值，则需要在子组件中定义一个值a，初始化赋值。父组件值修改，子组件用watch监听，a的值会相应做出改变。

参考文章 https://blog.csdn.net/qq_39692513/article/details/80791458

---

2019-07-08修改

场景： 父组件list循环后：item.a = true, 点击子组件修改属性：a[3] = false，页面上的a数据未改变，

bugfix:  this.list.$set(item, 'a', true);  item[3].a = false;

参考文章 https://www.jianshu.com/p/71b1807b1815