1. Transfer data synchronously

The parent component food passes the type field with a value of 0 to the child component through props. When the child component initializes, it can get the type field and render the character "0 fruit"

// Parent component food.vue
<template>
  <apple :type="type"></apple>
</template>
<script>
    data (){
        return {
          type: 0
      };
      }
</script>
// Subcomponent apple.vue
<template>
  <span>{{childType}}</span>
</template>
<script>
   props: ['type'],
   created () {
           this.childType = this.formatterType(type);
   },
   method () {
           formatterType (type) {
        if (type === 0) {
          return "0 Fruits";
        }
        if (type === 1) {
          return "1 Vegetables";
        }
        return '';
      }
   }
</script>

2 asynchronous transfer of data

To ensure asynchronous data transfer, according to the principle of two-way binding of VUE, it is not hard to know that asynchronous data transfer requires a watch.

2.1 props

If the data passed by props is associated with the template, the data will be watch ed when the component is initialized. See type and info in the following code.
If the data passed by props is not associated with the template, a watch is added to the data passed by props, and the object of the associated template is modified in the watch method. You can see the child? Type in the following code. In this method, watch listens to the changed props, so it needs to initialize the target object.

// Parent component food.vue
<template>
  <apple :type="type" :info="info"></apple>
</template>
<script>
  data (){
    return {
      type: 0,
      info: {comment: 'ugly food'}
    };
  }
  created () {
      setTimeout (()=>{
        this.type = 1;
      this.info = {comment: 'tasty food'};
    },1000);
  }
</script>
// Subcomponent apple.vue
<template>
  <div class="memuManage">
    <span>type: {{child_type}}</span>
    <span>type: {{type|formatterType}}</span>
    <span>info: {{info.comment}}</span>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        child_type: ''
      };
    },
    props: ["type","info"],
    watch: {
      type (newVal) {
        this.child_type = this.formatterType(newVal);
      }
    },
    created () {
      this.child_type = this.formatterType(this.type);
    },
    filters: {
      formatterType: function (type) {
        if (type === 0) {
          return "0 Fruits";
        }
        if (type === 1) {
          return "1 Vegetables";
        }
        return '';
      }
    },
    methods: {
      formatterType (type) {
        if (type === 0) {
          return "0 Fruits";
        }
        if (type === 1) {
          return "1 Vegetables";
        }
        return '';
      }
    }
  };
</script>

2.2 vuex

The data is stored in the store, and the parent component calls the methods in vuex to change the data.
If the data of the store is associated with the template of the subcomponent, the data will be watch ed when the subcomponent is initialized.
If the data of the store is not associated with the template of the subcomponent, a watch is added to the data of the store, and the object of the associated template is modified in the watch method. The object of the associated template needs to be initialized.

3. Transfer data synchronously or asynchronously

If the parent component may transfer data to the child component synchronously or asynchronously, the child component first needs to initialize the target object in created or computed, and the child component needs to watch the data transferred by props and modify the target object.