组件通信在vue中十分重要，在这里先给大家介绍六种，之后也会慢慢补充

目录

1. 父组件将动态数据传递给子组件，父组件更改数据子组件接到的数据也会变化

2. 父组件将自己的方法传递给自组件，子组件调用方法传数据给父组件

3. 父组件给子组件绑定事件

4. ref通信

5. 使用event bus事件总线 

6.使用$root,$parent,$children

---

1. 父组件将动态数据传递给子组件，父组件更改数据子组件接到的数据也会变化

注意：父组件和子组件并不是共用同一个数据，而是父组件将自己的数据复制了一份传给子组件，父组件数据变化时都会重新传值dom也会重新渲染 但子组件不能去直接修改父组件的值

<div id="app">
        <h1>app</h1>
        <app-father></app-father>
    </div>
    <template id="app-father">
        <div>
            <input type="text" v-model='message' >
            <h2>{{message}}</h2>
            <app-son :message="message"></app-son>
        </div>  
    </template>

    <template id="app-son">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </template>

Vue.component('app-father',{
        template:'#app-father',
        data(){
            return{
                message:''
            }
        }
    })

    Vue.component('app-son',{
        template:'#app-son',
        props:['message'] // 自组件利用props属性接收数据
    })

    new Vue({
        el:'#app'
    })

2. 父组件将自己的方法传递给自组件，子组件调用方法传数据给父组件

<div id="app">
        <h1>app</h1>
        <app-father></app-father>
    </div>
    <template id="app-father">
        <div>
            <h2>app-fatehr</h2>
            <h2>{{money}}</h2>
            <app-son :get-money="giveMoney"></app-son>
        </div>
        
    </template>

    <template id="app-son">
        <div>
            <button @click='get'>son-getMoney</button>
            <h3>app-son---{{money}}</h3>
        </div>
        
    </template>

Vue.component('app-father',{
        template:'#app-father',
        data(){
            return {
                money:100
            }
        },
        methods:{
            giveMoney(money){
                this.money-=money
            }
        }
    })

    Vue.component('app-son',{
        template:'#app-son',
        props:['getMoney'],   // 接收的是一个方法
        data(){
            return{
                money:0
            }
        },
        methods:{
            get(){
                this.getMoney(10) // 调用时可以传参数也可以不传  使用this是因为接收了 就相当是自己的方法了
                this.money+=10
            }
        }
    })

    new Vue({
        el:'#app'
    })

3. 父组件给子组件绑定事件

事件的处理程序就是父组件的方法，自组件使用$emit调用方法的时候可以传数据给父组件，子组件不需要接收 直接是用$emit来触发函数 参数跟在后面

<div id="app">
        <h1>app</h1>
        <app-father></app-father>
    </div>
    <template id="app-father">
        <div>
            <h2>app-fatehr</h2>
            <h2>{{money}}</h2>
            <app-son @get-money="giveMoney"></app-son>
        </div>
        
    </template>

    <template id="app-son">
        <div>
            <button @click='get'>son-getMoney</button>
            <h3>app-son---{{money}}</h3>
        </div>
        
    </template>

 Vue.component('app-father',{
        template:'#app-father',
        data(){
            return {
                money:100
            }
        },
        methods:{
            giveMoney(money){
                this.money-=money
            }
        }
    })

    Vue.component('app-son',{
        template:'#app-son',
        data(){
            return{
                money:0
            }
        },
        methods:{
            get(){
                this.$emit('get-money',10)  // 后面跟传递的参数
                this.money+=10
            }
        }
    })

    new Vue({
        el:'#app'
    })

4. ref通信

ref 和 关系链 组件可以利用ref为自己的dom做出独有的标记，利用this.$refs来获得从而进行操作

<div id="app">
        <button @click='get'>get</button>
        <app-father ref='kids' v-for='x in 10'></app-father>
    </div>

    <template id="app-father">
        <input type="text" v-model="message">
    </template>

Vue.component('app-father',{
        template:'#app-father',
        data(){
            return{
                message:'hello vue.js'
            }
        }
    })
    new Vue({
        el:'#app',
        methods:{
            get(){
                this.$refs.kids.forEach(element => {  // 这时的kids是一个数组
                    console.log(element.message)
                });
            }
        }
    })

5. 使用event bus事件总线 

这个知道的人没有很多 但是也比较简单 也很重要

<div id="app">
        
        <app-father></app-father>
    </div>
    <template id="app-father">
        <div>
           <button @click='hint'>hit</button>
            <app-son></app-son>
        </div>
        
    </template>

    <template id="app-son">
        <div>
          
        </div>
    </template>

// 使用event bus 事件总线来传递数据 
   var bus = new Vue()

    Vue.component('app-father',{
        template:'#app-father',
        methods:{
            hint(){
                bus.$emit('son-toCry')  // 触发bus上绑定的son-toCry函数
            }
        }
    })

    Vue.component('app-son',{
        template:'#app-son',
        methods:{
            cry(){
                console.log('wuwuwuwu.........')
            }
        },
        // 在初始化的时候绑定事件
        mounted(){
            bus.$on('son-toCry',()=>{
                this.cry()
            })
        }
       
    })

    new Vue({
        el:'#app'
    })

6.使用$root,$parent,$children

在每一个组件的实例身上，都有$root,$parent,$children来指向最外面成根实例、父组件实例、子组件实例们，所以，理论上来说，因为存在一条关系链，所以任意的组件都能找到除了它之外的任意的组，/这样的话我们就可以进行任意的通信,更改数据、调用方法。但是，不要这么做，因为组件的作用域应该都是独立的

比如，数据放在子组件身上，让父组件去改，这种思路本身就是不科学的，所以应该数据放在父组件身上，父组件把数据传递给子组件，父组件更改数据的时候，子组件也就改了

<div id="app">
        <button @click='get'>btn</button>
        <app-father></app-father>
    </div>
    <template id="app-father">
        <div>
            <button @click='get'>btn</button>
           <app-son></app-son>
        </div>
        
    </template>

    <template id="app-son">
        <div>
           <button @click='get'>btn</button>
        </div>
        
    </template>

    Vue.component('app-father',{
        template:'#app-father',
        data(){
            return {
                message:'father'
            }
        },
        methods:{
            get(){
                console.log(this)
                console.log(this.$children[0].message)  // console.log(son)
            }
        }
    })

    Vue.component('app-son',{
        template:'#app-son',
        data(){
            return {
                message:'son'
            }
        },
        methods:{
            get(){
                console.log(this)
                console.log(this.$parent.$parent.message) // console.log(app)
            }
        }
     
    })

    new Vue({
        el:'#app',
        data:{
            message:'app'
        },
        methods:{
            get(){
                console.log(this)
                console.log(this.$children[0].message)  // console.log(father)
            }
        }
    })