组件间 相关 通讯

[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 } }, ``` 父组件 ``` //在方法中 methods: { this.$refs.food.show() } ``` ## 子组件数据变化,传递给父组件 子组件 ``` //js methods: { select(Type){ this.typeSelect \= Type this.$emit('ratingtype', Type) }, ``` 父组件 ``` //js methods: { ratingtype(Type){ console.log('ahahaa', Type) } }, ```