Vue parent-child components asynchronously transfer data via PROP

Vue today encountered a small hole in the development of parent-child component communication, the situation is like this: / / select * from echart; / / select * from echart; / / select * from EChart; / / select * from EChart; / / Select * from EChart; / / Select * from EChart; Through this article to make a record, but also hope to help the future encounter the same problem partners, the example using demo demonstration

The parent component

<template>
  <div id="app">
    <child :message="message"></child>
  </div>
</template>

<script>
import child from "./components/child";
export default {
  name: "app",
  components: {child },
  data() {
    return {
      message:{}
    };
  },
  mounted(){// simulate an asynchronous requestsetTimeout(() => this.message.age = 18,2000)}}; </script>Copy the code

Child components

<template>
    <div>{{age}}</div>
</template>

<script type='text/ecmascript-6'>
export default {
  props: ["message"].mounted(){this.age = this.message.age},data() {
    return{ age: null }; }}; </script>Copy the code

The actual effect is shown in figure

{{message.age}}
message
this.message.age
age
watch

Child components

<template>
    <div>{{age}}</div>
</template>

<script type='text/ecmascript-6'>
export default {
  props: ["message"].mounted() {
    this.age = this.message.age;
  },
  watch: {
      message(nv,ov){
          this.age = nv.age
      }
  },
  data() {
    return{ age: null }; }}; </script>Copy the code

See the tutorial on the web basically ends there, the child components are rendered correctly, but… My page is still the same, still blank, check the debugging tool, still like this:

Debug the watch and find that the code in the watch will not execute at all, but the message is obviously changed, so I travel in the network for some time, and then I see this paragraph.

getter setter
{}

<template>
  <div id="app">
    <child :message="message"></child>
  </div>
</template>

<script>
import child from "./components/child";
export default {
  name: "app",
  components: {child },
 
  data() {
    return {
      message:{age:null}
    };
  },
  mounted(){// simulate an asynchronous requestsetTimeout(() => this.message.age = 18,2000)}}; </script>Copy the code

Well, should be all right, open the page, uh… It’s a familiar page

this.message.age = 18
this.message = xxx

<template>
    <div>{{age}}</div>
</template>

<script type='text/ecmascript-6'>
export default {
  props: ["message"].mounted() {
    this.age = this.message.age;
  },
  watch: {
    message: {
      deep: true, handler(nv, ov) { this.age = nv.age; }}},data() {
    return{ age: null }; }}; </script>Copy the code

Open the page again