组件通信

1. 父子组件通信

A: 绑定的是简单类型数据

1. 父组件中定义数据， 通过单向数据绑定的形式， 将数据绑定在子组件身上， 属性是自定义属性，
2. 子组件通过配置项中的props接收数据， props可以是一个数组，数组中放的是自定义属性名称
3. 那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用
4. 父组件中数据一旦修改， 子组件数据就会修改， 那么这也就是单项数据流

 <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div class="father-box">
      <h3> father 组件</h3>
      <hr>
      <Son v-bind:money = "money"></Son>
      <Son :money = "money"></Son>
    </div>
  </template>
  <template id="son">
    <div class="son-box">
      <h3> son 组件</h3>
      <p> 我爸这个月给了我： {{ money }}生活费 </p>
    </div>
  </template>

 Vue.component('Father',{
    template: '#father',
    data(){
      return {
        money: 1000
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    props: ['money']
  })
  new Vue({
    el: '#app'
  })

2. 子父通信（不推荐)

子父通信（效果上像， 间接的使用了父组件的东西 ）

B: 绑定复杂数据类型

1. 父组件中的数据是一复杂数据类型， 那么父组件绑定数据的时候， 给子组件的是一个引用地址
2. 子组件可以通过这个引用地址， 修改这个数据
3. 效果上像， 子组件和父组件通信了， 违背单项数据流

<div id="app">
    <Father></Father>
  </div>
  <template id="father">
      <div>
        <h3>father</h3>
        <p>father现在有： {{sifangqian.money}} 块 </p>
        <Son :sifangqian = 'sifangqian'></Son>
      </div>
  </template>
  <template id="son">
    <div>
      <h3>Son</h3>
      <input type="text" v-model = "sifangqian.money">
      <p> 老爸给了我：{{ sifangqian.money  }}块 </p>
    </div>
  </template>

 Vue.component('Father',{
    template: '#father',
    data(){
      return {
       sifangqian: {
         money: 1000
       }
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    props: ['sifangqian']
  })
  new Vue({
    el: '#app'
  })

C: 父组件可以传递一个方法给子组件

1. 父组件定义方法， 然后将这个方法通过单向数据绑定的形式传递给子组件
2. 子组件通过props属性接收， 然后通过 @click = “方法名”

 <div id="app">
    <King></King>
  </div>
  <template id="king">
      <div>
        <h3> 我是国王： </h3>
        <p> 我国库中有：{{ gk }} 钱 </p>
        <People :getmoney = "getMoney"></People>
      </div>
  </template>
  <template id="people">
      <div>
        <h3> 我是国王的子民 </h3>
        <button @click = "getmoney(1000)"> 上缴 </button>
      </div>
  </template>

Vue.component('King',{
    template: '#king',
    data(){
      return {
        gk: 0
      }
    },
   methods: {
    getMoney(value){
      this.gk += value
    }
   }
  })
  Vue.component('People',{
    template: '#people',
    props: ['getmoney']
  })
  new Vue({
    el: '#app'
  })

D: 通过自定义事件来实现通信

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

html:
  <div id="app">
   <King></King>
 </div>
 <template id="king">
     <div>
       <h3> I am king </h3>
       <!-- <People v-on: get = "get"></People> -->
       <p> 国库中有：{{ gk }} 钱 </p>
       <People @get = "get"></People>
     </div>
 </template>
 <template id="people">
   <div>
     <h3> I am people </h3>
     <button @click = "give"> 交钱 </button>
   </div>
 </template>

js:
 Vue.component('King',{
    template: '#king',
    data () {
      return {
        gk: 0
      }
    },
    methods: {
      get( value ){
        this.gk += value 
      }
    }
  })
  Vue.component('people',{
    template: '#people',

    data () {
      return {
        money: 2000
      }
    },
    methods: {
      give () {
        this.$emit('get', this.money/2)
      }
    }
  })
  new Vue({
    el: '#app'
  })

非父子组件通信

1.使用ref来绑定组件 （注意：ref也可以绑定DOM元素） 【ref链】

1. 在父组件的模板中， 使用ref = refName 绑定在两个兄弟组件身上
2. 在任意一个子组件中， 就可以通过 this.$parent.$refs.refName 就可以获得另一个子组件了， 同时这个自组件身上的数据和方法同样也得到了

html：
 <div id="app">
   <Father></Father>
 </div>

 <template id="father">
   <div>
     <h3> 我是父亲 </h3>
     <hr>
     <Boy ref = "boy" ></Boy>
     <hr>
     <Girl ref = "girl" ></Girl>

     <div ref = 'hello'>
       你好
     </div>
   </div>
 </template>

 <template id="boy">
     <div>

       <h3> I am boy </h3>
       <p> 我现在有：{{ cash }} 钱 </p>
     </div>
 </template>

 <template id="girl">
   <div>

     <h3> I am girl </h3>
     <button @click = 'give'> 给body 1000块 </button>
   </div>
 </template>

Js:
 Vue.component('Father',{
   template: '#father',
   data () {
     return {
       name: 'father'
     }
   }
 })
 Vue.component('Boy',{
   template: '#boy',
   data () {
     return {
       cash: 2000
     }
   },
   methods: {
     incrementCash (value) {
       this.cash += value
     }
   }
 })
 Vue.component('Girl',{
   template: '#girl',
   data () {
     return {
       money: 1000
     }
   },
   methods: {
     give(){
       console.log('====================================');
       console.log(this.$parent);
       console.log('====================================');
       // console.log( this.$parent.$refs ) // { body: Vuecomponent,girl: VueComponent }
       this.$parent.$refs.boy.incrementCash( this.money )

       // this.$parent.$children
     }
   }
 })
 new Vue({
   el: '#app'
 })

2.通过事件总线（bus）

1. 它是通过事件的发布（声明）， 以及事件的订阅（触发）来做的
2. 首先在js中 创建一个bus对象（vm）

var bus = new Vue()

3. 在Count组件中定义数据， 和修改数据的方法
4. 在Count组件中 通过 created 钩子 ， 进行bus事件的发布

created: {
	bus.$on('add',this.addCount)
}

• 5. 在MyButton组件的方法中通过 bus进行事件的订阅

increment () {
	bus.$emit( 'add' )
}

html：
  <div id="app">
    <my-button></my-button>
    <Count></Count>
  </div>
  <template id="button">
    <button @click = "increment"> increment </button>
  </template>
  <template id="count">
    <div>
      {{ count }}
    </div>
  </template>

Js:
 var bus = new Vue()

  Vue.component('MyButton',{
    template: '#button',
    methods: {
      increment () {
        bus.$emit('add')
      }
    }
  })
  Vue.component('Count',{
    template: '#count',
    data () {
      return {
        count: 0
      }
    },
    methods: {
      addCount(){
        this.count ++
      }
    },
    created () { //created表示组件在创建结束之后就会自动触发的一个方法
      //表示组件的装载结束（template模板的装载）
     bus.$on('add',this.addCount)

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