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