vue parent component data modification, data unmodified subassembly

 

page:

Parent element   <myfeedback> </ myfeedback>   subassembly   <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>
 9 export default {
10     name: "myfeedback",
11     data() {
12         return {
13             info: {
14                 data1: 115             }
16         }
17     },
18     methods: {
19         infoChange() {
20             this.info.data1++
21         }
22     }
23 };
24 </script>

 

news.vue

. 1 <Template>
 2      <div>
 . 3          <div> {{Dataone}} The parent element data assigned to the sub-assembly of data, the data is only rendered mounted, the parent component data changes subassembly data does not change, need watch monitor </ div>
 . 4          <div> {{}} newInfo.dataOne parent component directly transfer data, data change parent component subassembly change </ div>
 . 5      </ div>
 . 6 </ Template>
 . 7  
. 8 <Script>
 . 9 Export default {
 10      name: " News " ,
 . 11      The props: {
 12 is          newInfo: {
 13 is              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. The parent component value transmitted data appear only subassembly, assembly can be used directly pass the value of the parent, not re-defined data value subassembly

2. To modify the traditional values ​​subassembly parent element, define a value in a sub-assembly, the initialization assignment. Modify the value of the parent component, subassembly with listening watch, the value of a change will be made accordingly.

 

Reference article https://blog.csdn.net/qq_39692513/article/details/80791458