上一节主要讲了父组件如何向子组件传值，这一节课主要讲子组件是如何向父组件传值的。
我们首先介绍一下今天要使用的案例—实现一个加减的功能，并且显示相应的数字，如同购物车加减数量的功能。
接下来我们首先要创建一个Counter.vue的组件
Html部分：
这里面的num是动态的，还需要注意一点，这个子组件在不同的父组件里时，可能其起始值的需求可能是不一样的，所以这个num需要从父组件里传值过来，以达到这个组件的灵活性。
Js部分—按照常理，我们应该是进行下面的操作的，做点击事件的处理喽：
props: ['num'],
data () {
return {
}
},
methods: {
increment() {
this.$emit("incre")
},
decrement() {
this.$emit("decre")
}
}
很简单啊，这有什么难的啊！是这样的吗？我们看下页面显示—功能是没有问题的，看起来一切都先完美啊！可是可是，我们看下控制台，会吓一大跳，一片红！What?出什么事了？
来解释一下：
Num是父组件传过来的数据，而你在子组件里竟然给修改覆盖了！真的是胆大包天噢！敢动老子的东西？这万万不行的。Vue也是遵守孝道的良民好吧！这事千万使不得的，要改也需要老子来改喽！
大家可以换位思考一下啦，子组件被不同的父组件调用，或者在相同的父组件里被调用多次，如果每个子组件都要改父组件的数据，那么就乱，完全是失控状态了，所以一定要有规矩。
Vue的机制就是子组件里是不可以覆盖父组件的数据的！
怎么办呢？
只有在子组件里去通知父组件，我的值要改变，然后在父组件里兼听到这种需求后，就立即执行！
这就是两步骤：
1. 在子组件里发送自定义事件
2. 在父组件里兼听事件后执行
子组件里的代码：
Js部分：
props: ['num'],
data () {
return {
}
},
methods: {
increment() {
this.$emit("incre")
},
decrement() {
this.$emit("decre")
}
}
父组件里的代码：
Js部分：
import Counter from './components/Counter.vue'
export default {
components: {
'v-counter': Counter
},
data() {
return {
num: 6
}
},
methods: {
increment() {
this.num++
},
decrement() {
this.num--
}
}
}
父组件向子组件传值，显示其POWER，子组件向父组件传值，显示规矩
欢迎关注微信公众号：duzhan99
