vuejs组件通信

组件通信

所有的组件通信都是单向的

父子组件通信

A:邦定的是简单数据类型
1、父组件中定义数据，通过单向数据绑定属性把父组件的数据绑定在子组件身上，属性是自定属性
2、子属性通过配置项中的props接收数据，props可以是一个数组，数组中放的是自定义属性
3、这个自定义属性可以像data的属性一样直接使用
4、父组件中数据一旦修改，子组件中的通信数据也会改变（单向数据邦定）

        <Father></Father>
    </div>
    <template id="father">
        <div class="father-box">
            <h3>father 组件</h3>
            <p>{{money}}</p>
            <hr>
            <Son :money="money"></Son>
        </div>
    </template>
    <template id="son">
        <div class="son-box">
            <h3>son组件</h3>
            、<input type="text" v-model='money'> 如果money不是引用数据类型就会出错
            <p>这是我爸这个月给我的生活费:{{money}}</p>
        </div>
    </template>
    <script>
        Vue.component('Father', {
            template: '#father',
            data() {
                return {
                    money: 1000
                }
            }
        })
        Vue.component('Son', {
            template: '#son',
            props: ['money']
        })
        new Vue({
            el: '#app'
        })
    </script>

    
 #### 子父通信（效果上像，间接的使用了父组件的东西）   
B:邦定复杂数据类型--------【不推荐】
    1、父组件中的数据类型是复杂数据类型，那么父组件邦定数据的时候，给子组件的是一个引用地址，
    2、子组件可以通过这个引用地址，改修了这个数据
    3、效果上，子组件和父组件通信了，违背单向数据流

html代码
html
<div id="app">
        <Father></Father>
    </div>
    <template id="father">
        <div>
            <h3>father 组件</h3>
            <p>私房钱{{money.moneys}}</p>
            <hr>
            <Son :money='money'></Son>
        </div>
    </template>
    <template id="son">
        <div>
            <h3>son 组件</h3>
            <input type="text" v-model='money.moneys'>
            <p>这是我爸这个月给我的生活费{{money.moneys}}</p>
        </div>
    </template>
    ```
    js代码
    ```js
    <script>
        Vue.component('Father', {
            template: '#father',
            data() {
                return {
                    money: {
                        moneys: 1000
                    }
                }
            }
        })
        Vue.component('Son', {
            template: '#son',
            props: ['money']
        })
        new Vue({
            el: '#app'
        })
    </script>

C:父组件可以传递一个方法给子组件
1、父组件定义方法，然后将这个方法通过单向数据绑定的形式传递给子组件
2、子组件通过props属性接收，然后通过@click = ‘方法名’
html:

<div id="app">
        <King></King>
    </div>
    <template id="king">
        <div>
                <h3>king 组件</h3>
                <p>{{money}}</p>
                <hr>
                <Pingming :getmoney='getMoney'>    </Pingming>
        </div>
    </template>
    <template id="pingming">
       <div>
            <h3>pingming 组件</h3>
            <input type="button" @click='getmoney(1000)' value="上缴">
       </div>
    </template>

js：

 <script>
        Vue.component('King', {
            template: '#king',
            data() {
                return {
                    money: 0
                }
            },
            methods: {
                getMoney(value) {
                    this.money += value
                }
            }
        })
        Vue.component('Pingming', {
            template: '#pingming',
            props: ['getmoney']
        })
        new Vue({
            el: '#app'
        })
    </script>

D：通过自定义事件来实现通信
1、在父组件中定义 数据 和 方法 （方法是用来操作数据的）
2、在子组件身上绑定自定义事件
3、子组件定义方法，在这个方法中通过 this.$emit(eventType，实际参数) 来调用自定义事件处理程序
html代码

<div id="app">
<King></King>
</div>
<template id="king">
<div>
<p>King 组件</p>
<p>{{money}}</p>
<People @get="get"></People>
</div>
</template>
<template id="people">
<div>
<p>people组件</p>
<p>{{moneys}}</p>
<input type="button" value="上缴" @click='give'>
</div>
</template>

js代码

      Vue.component('King', {
          template: '#king',
          data() {
              return {
                   money: 0
              }
          },
          methods: {
              get(value) {
                  this.money += value
          }
        }
          })
        Vue.component('People', {
        template: '#people',
        data() {
          return {
              moneys: 1000
          }
        },
        methods: {
          give() {
              this.$emit('get', this.moneys)
          }
       }
    })

非父子组件通信

-使用ref来绑定组件，（注意：ref也可以绑定DOM元素）（ref链）
    1、在父组件的模板中，使用ref = ‘name’绑定在两个兄弟组件身上，
    2、在任意一个子组件中，就可以通过 this.$parent.$ref.refName 就可以获得另一个子组件了，同时这个子组件身上的数据和方法同样也得到 了
    
-通过事件总线（bus）（没有共同的父组件----根组件不算（new 实例））
1、它是通过事件的发布，以及事件的订阅（触发）来做的
2、首先在js中，创建一个bus对象（vm）
    ````javascript
        var bus = new Vue()
    ```
3、在count组件中定义数据，和修改数据的方法
4、在count组件中 通过created钩子，进行bus事件的发布
    ```javascript
        created:{
            bus.$on('add',this.addCount)
        }

    5、在MyButton组件的方法中通过bus进行事件的订阅
    ```javascript
        increment(){
            bus.$emit('add')
        }