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:              }
         }
     },

　　　　　　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:
         }
     },
     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