Vue组件通信的方式

组件通信

组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信。

组件通信的方式

• 父子组件通信-----props

1.在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上

<Son :money = "money"/>

2.在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，props的取值可以使一个数组

Vue.component('Son',{
          template: '#son',
          props: ['money']
        })

3.在子组件模板中，接收到的属性可以像全局变量一样直接使用

 <p> 父组件给的  {{ money }}  </p> 

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

    <template id="father">
        <div>
            <h3> 这里是父组件 </h3>
            <hr>
            <Son v-bind:money = "money" v-bind:mask = "mask"></Son>
        </div>
    </template>

    <template id="son">
        <div>
            <h3> 这里是子组件 </h3>
            <p> 父组件给的{{ money }} </p>
            <p> {{ mask }} </p>
        </div>
    </template>

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

• 子父组件通信-----自定义事件

1. 在父组件的模板中，通过事件绑定的形式，绑定一个自定义事件在子组件身上

<Son @aa = "fn"/>     //这边要注意： fn是要在父组件配置项methods中定义

2. 在子组件的配置项methods中写一个事件处理程序，在事件处理程序中触发父组件绑定的自定义事件

Vue.component('Son',{
            template: '#son',
            data () {
              return {
                hongbao: 500
              }
            },
            methods: {
              giveFather () {
                //如何进行父组件给子组件的自定义事件触发
                this.$emit('give',this.hongbao)
              }
            }
          })

3. 将子组件定义的事件处理程序 giveFather,绑定在子组件的按钮身上

<template id="son">
  <div>
    <button @click = "giveFather"> give </button>
    <h3> 这里是son组件 </h3>
  </div>
</template>

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

    <template id="father">
        <div>
            <h3> 这里是父组件 </h3>
            <p> 子组件给了{{ money }} </p>
            <Son @give = "getMoney"></Son>
        </div>
    </template>

    <template id="son">
        <div>
            <h3> 这里是子组件 </h3>
            <button @click = "giveFather"> give </button>
        </div>
    </template>

Vue.component('Father',{
        template: '#father',
        data () {
            return {
                money: 0
            }
        },
        methods: {
            getMoney ( val ) {
                this.money = val
            }
        }
    })

    Vue.component('Son',{
        template: '#son',
        data () {
            return {
                qian: 1000
            }
        },
        methods: {
            giveFather () {
                this.$emit( 'give',this.qian )
            }
        }
    })

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

• 子父组件通信-----methods方法

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

    <template id="father">
        <div>
            <h3> 这里是父组件 </h3>
            <p> num:{{ num }} </p>
            <hr>
            <Son :add = "add"></Son>
        </div>
    </template>

    <template id="son">
        <div>
            <h3> 这里是子组件 </h3>
            <button @click = "add(money)"> give </button>
        </div>
    </template>

Vue.component('Father',{
        template:'#father',
        data () {
            return {
                num: 0
            }
        },
        methods: {
            add ( val ) {
                 this.num = val
            }
        }
    })

    Vue.component('Son',{
        template:'#son',
        data () {
            return {
                money: 500
            }
        },
        props: ['add']
    })

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

• 非父子组件通信----$refs链
  通过ref绑定组件后，我们发现在他们的共同父组件的 $refs里面可以找到子组件

//boy组件把数据给到father组件再给girl组件
<div id="app">
        <Father></Father>
    </div>

    <template id="father">
        <div>
            <h3>这里是father</h3>
            <button @click = "look"> 查看father的this </button>
            <p> father的a:{{ a }} </p>
            <hr>
            <Boy ref = "boy"></Boy>
            <Girl ref = "girl" :a = "a"></Girl>
        </div>
    </template>

    <template id="boy">
        <div>
            <h3>这里是son</h3>
            <p>{{ b }}</p>
        </div>
    </template>

    <template id="girl">
        <div>
            <h3>这里是girl</h3>
            <button @click = "out"> 输出girl </button>
        </div>
    </template>

Vue.component('Father',{
        template: '#father',
        data () {
            return {
                a: 0
            }
        },
        methods: {
            look () {
                this.a = this.$refs.boy.b 
            }
        }
    })

    Vue.component('Boy',{
        template: '#boy',
        data () {
            return {
                b: 1000
            }
        }
    })

    Vue.component('Girl',{
        template: '#girl',
        data () {
            return {
                c: 0
            }
        },
        methods: {
            out () {
                console.log( this )
                console.log( this.$attrs )
            }
        }
    })
    new Vue({
        el: '#app'
    })

• 非父子组件通信-----bus总线
  bus事件总线，我们是通过$on来定义事件，通过$emit来触发事件
  流程：

1. 在其中一个组件的 挂载钩子函数 上 做事件的声明

Vue.component('Sma',{
    template: '#small',
    data () {
      return {
        flag: false
      }
    },
    mounted () { //当前组件挂载结束，也就是我们可以在页面当中看到真实dom
      // mounted这个钩子函数的触发条件是组件创建时会自动触发
      // 事件的声明
      var _this = this 
      bus.$on( 'aa',function () {
        _this.flag = true
        console.log( this )//这里是this指的是bus， 但是我们需要的this应该是Sma这个组件
      })
    }
    })

2. 在另一个组件中 通过 bus.$emit(‘aa’)来触发这个自定义事件

<div id="app">
    <Bro></Bro>
    <Sma></Sma>
  </div>
  <template id="big">
    <div>
      <h3> 这里是哥哥组件  </h3>
      <button @click = "hick"> 揍 </button>
    </div>
  </template>

  <template id="small">
    <div>
      <h3> 这里是弟弟组件 </h3>
      <p v-show = "flag"> 呜呜呜呜呜呜呜呜呜uwuwuwuwu </p>
    </div>
  </template>

var bus = new Vue() // bus原型上有  $on   $emit 

  Vue.component('Bro',{
    template: '#big',
    methods: {
      hick () {
        bus.$emit('aa')
      }
    }
  })

  Vue.component('Sma',{
    template: '#small',
    data () {
      return {
        flag: false
      }
    },
    mounted () { //当前组件挂载结束，也就是我们可以在页面当中看到真实dom
      // mounted这个钩子函数的触发条件是组件创建时会自动触发
      // 事件的声明
      var _this = this 
      bus.$on( 'aa',function () {
        _this.flag = true
        console.log( this )//这里是this指的是bus， 但是我们需要的this应该是Sma这个组件
      })
    }
  })

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

别忘了引入Vue.js的cdn哦 >_0 ~