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

 

页面：

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

 

myfeedback.vue

 1 <template>
 2     <div>
 3         <news :newInfo="info"><news>
 4         <div @click="infoChange">按钮</div>
 5     </div>
 6 </template>
 7 
 8 <script>
　　import news from 'xxxxx'
 9 export default {
10     name: "myfeedback",
11     data() {
12         return {
13             info: {
14                 data1: 115             }
16         }
17     },

　　　　　　components: {

　　　　　　　　news

　　　　　　},

18     methods: {
19         infoChange() {
20             this.info.data1++
21         }
22     }
23 };
24 </script>

 

news.vue

 1 <template>
 2     <div>
 3         <div>{{dataOne}}将父组件数据赋值给子组件数据，数据仅在mounted中渲染，父组件数据改变子组件数据不改变，须要用watch监听</div>
 4         <div>{{newInfo.dataOne}}直接使用父组件传递的数据，父组件数据改变子组件改变</div>
 5     </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10     name: "news",
11     props: {
12         newInfo: {
13             type: Object
14         }
15     },
16     watch: {
17         newInfo: {
18             handler(newValue, oldValue){
19                 this.newInfo = newValue
20             },
21             deep:true
22         }
23     },
24     data() {
25         return {
26             dataOne: 0
27         }
28     },
29     mounted() {
30         this.dataOne = this.newInfo.dataOne;
31     }
32 };
33 </script>

 

ps:

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

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

 

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