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: {{ment}}</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传递的数据，并修改目标对象。
