组件之间的通信

1、父子组件通信

1.1父组件到子组件

方式：通过 props 属性传递数据

注意：子组件无法直接使用父组件的数据

//=============  父组件  =================

<aaa :money="bar"></aaa> 

important aaa from '......'
var vm = new Vue({
  el: '#app',
  data: { 
    bar:102
  },
})

//==============  子组件  ===============

<template>
    <div>
      <p>默认数据-----{{ money }}</p>
    </div>
</template>

<script>
    var vm = new Vue({
      el: '#app',
      props:[ "money" ],
      data: { 
        return{
            myMoney:this.money
        }
      },
    })
</script>

1.2子组件到父组件

方式：父组件给子组件定义一个函数，由子组件调用这个函数

说明：借用Vue中的自定义事件 （ :cunstomFn = "fn" ）

注意：$emit 触发时间

//============  父组件  ================
<hello @parentFn='parentFn'   ></hello>
<script>
new Vue({
    data:{
        return {
            message:''
        }
    },
    methond:{
        // 父组件：提供方法
        parentFn( data ){
            this.message = data.message
        }
    }
})
</script>

//============  子组件  ====================
<template>
    <button @click="iclick">按钮</button>
</template>
<script>
new Vue({
    data:{
        return{
            message : '我是子组件传递给父组件的值'
        }
    },
    methonds:{
        iclick(){
            let data = {
                message : this.message
            }
            this.$emit( 'parentFn' , data )
        }
    }
})
</script>

★ 总结：

1.2.1 父 ===> 子

原理：通过 props 来实现

步骤：1、在父组件标签中将要传递的数据作为组件标签的属性，<bbb :data="data"></bbb>

2、在子组件内部js中指定 props:["data"]

1.2.2 子 ===> 父

原理：通过 $emit 来实现

步骤：1、父组件提供一个方法,ievent( data ){ .... }

2、将这个方法传递给子组件，<ccc @ievent="ievent" ></ccc>

3、由子组件调用这个方法，需要传递的数据作为参数，iclick(){ this.$emit( 'ievent' , data )}

2、非父子组件通讯

在简单的场景下，可以使用一个 空的Vue实例 作为 事件总线

原理：创建一个公共的 事件总线 作为一个中转站，通过 $on 接收事件，$emit 触发事件

//==========   创建一个公共的事件总线  Hub  (main.js)===========
let Hub = new Vue();

//============   组件 A  （触发）================
<div @click="eve"></div>

methods: {
  eve() {
    Hub.$emit('change','hehe'); //Hub触发事件
  }
}

//============   组件 B   (接收) ====================

<div></div>

created() {
  Hub.$on('change', () => { //Hub接收事件
    this.msg = 'hehe';
  });
}

★总结：

步骤：2.1 组件A中通过 Hub.$emit( 'fn', 数据1, 数据2 )

2.2 组件B中通过 Hub.$on( 'fn' , function( data1, data2 ){...} )

注意：先绑定事件，再触发事件，否则数据无法传递，但是不会报错