Vue.js中组件通信的方法

1. 父子组件的通信方法
   首先父组件需要v-bind绑定数据，在子组件中用props进行接收数据，这样，父组件中的数据变动时，就可以即时通知到子组件
   子组件如果要与父组件进行通信的话，子组件需要自定义事件$emit，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

// parent.vue
<template>
    <div class="parent">
        <p>父亲:给你{{ money }}元零花钱</p>
        <kid :money=" money" @repay="repay"></kid>
        <br>
        <button @click="add">那给你加100</button>
        <p v-if="back" @repay="repay">儿子：超过300我不要，还给你 {{ back }}元</p>
    </div>
</template>
<script>
export default {
    name: 'parent',
    data () {
        return {
            money: 100,
            back: 0
        }
    },
    components:{ kid },
    methods:{
        repay (back) {
            this.back = back
        },
        add(){
            this.money += 100;
        }
}
</script>

2.爷孙组件的通信是一级级上传，并不会冒泡，也就是说最底层需要一层层向外通知才可以到达最外层