1. 同步通报数据

父组件 food 经由过程 props 把 值为 0 的 type 字段传给子组件，子组件在初始化时能够拿到 type 字段，衬着出字符“0 生果”

// 父组件 food.vue
<template>
  <apple :type="type"></apple>
</template>
<script>
    data (){
        return {
          type: 0
      };
      }
</script>
// 子组件 apple.vue
<template>
  <span>{{childType}}</span>
</template>
<script>
   props: ['type'],
   created () {
           this.childType = this.formatterType(type);
   },
   method () {
           formatterType (type) {
        if (type === 0) {
          return "0 生果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
   }
</script>

2 异步通报数据

要保证异步通报数据，依据VUE的双向绑定道理，不难得知，异步通报的数据须要watch。

2.1 props

若props通报的数据关联到模板中，则组件初始化时会watch该数据。可见下面代码中的type和info。
若props通报的数据不关联到模板，则为props通报的数据增加watch，在watch要领中修正关联模板的对象。可见下面代码中的child_type。此要领中，watch监听到的是是发生变化的props，故须要对目的对象做初始化处置惩罚。

// 父组件 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>
// 子组件 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 生果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
    },
    methods: {
      formatterType (type) {
        if (type === 0) {
          return "0 生果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
    }
  };
</script>

2.2 vuex

数据存放在store中，父组件挪用vuex中的要领转变数据。
若store的数据关联子组件的模板，则子组件初始化时会watch该数据。
若store的数据不关联子组件的模板，则为store的数据增加watch，在watch要领中修正关联模板的对象。须要对关联模板的对象初始化。

3. 同步或异步通报数据

若父组件向子组件能够同步或异步通报数据，则起首子组件须要在created或许computed中对目的对象初始化，而且子组件中须要watch由props通报的数据，并修正目的对象。