[TOC] ## 子组件间共用数据 在 `goods`中同时有两个子组件, 他们共用一个 `goods` 对象,此时想在两个子组件通讯, 如,其中一个组件需要添加一个物品数量的属性.可以在 `goods`对象中添加 `count` ``` addCart(){ if (!this.food.count){ Vue.set(this.food, 'count', 1) } else { this.food.count++ } }, ``` 此时只要共用这个 `foods` 的都可以使用`computed`计算属性来监听 这个 `count` 值 ## 父组件调用组件方法 子组件中有方法 ``` methods: { show() { this.showFlag = true } }, ``` 父组件 ``` <food ref="food"></food> //在方法中 methods: { this.$refs.food.show() } ``` ## 子组件数据变化,传递给父组件 子组件 ``` <template> <div class="ratingselect"> <div class="rating-type border-1px"> <span @click="select(0)"></span> <span @click="select(1)"></span> <span @click="select(3)"></span> </div> </div> </template> //js methods: { select(Type){ this.typeSelect \= Type this.$emit('ratingtype', Type) }, ``` 父组件 ``` <ratingselect @ratingtype="ratingtype" ></ratingselect> //js methods: { ratingtype(Type){ console.log('ahahaa', Type) } }, ```