Vue 自定义事件 && 组件通信

App.vue
<template>
<!-- 
    组件的自定义事件：
        1.一种组件间通信的方式，使用于：子组件===>父组件
        2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)
        3.绑定自定义事件：
            .第一种方式，在父组件中：<Demo @custonEvent="test"/> 或 <Demo v-on:custonEvent="test"/>
            .第二种方式，在父组件中
                <demo ref="demo" />
                mounted(){this.$refs.demo.on('custonEvent', this.test)}
            .若想让自定义事件只杯触发一次，可以使用once事件修饰符，或$once方法
        4.触发自定义事件：this.$emit('custonEvent', 数据参数)
        5.解绑自定义事件： this.$off('custonEvent');
        6.组件上也可以绑定原生DOM事件，需要使用native修饰符
        7.注意：通过this.$refs.xxx.$on('custonEvent', 回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题。

 -->
    <div class="app">
        <h1>{{msg}}</h1>
        <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
        <School :getSchoolName="getSchoolName"/>
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据。 -->
        <!-- <Student v-on:customEvent.once="getStudentName"/> 事件修饰符同样可以使用 -->
        <!-- <Student v-on:customEvent="getStudentName"/> -->
        <!-- 通过指定ref，在当前组件挂载完(mounted),的时候绑定自定义事件，这种相对比较灵活，比如：三秒后绑定事件 -->
        <!-- 通过native事件修饰符来绑定原生事件 -->
        <Student ref="student" @click.native="studentClick"/>
    </div>
</template>

全局事件总线(GlobalEventBus)
  1.一种组件间通信的方式，适用于任意组件间通信
  2.安装全局事件总线：
    new Vue({
      render: h => h(App),
      beforeCreate(){
        Vue.prototype.$bus = this;
      }
    }).$mount('#app');
  3.适用事件总线：
    a.接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
      methods(){
        demo(data){...}
      }
      ...
      mounted() {
        this.$bus.$on('xxx', this.demo);
      },
      beforeDestroy(){
        this.$bus.$off('xxx');
      }
    b.提供数据：this.$bus.$emit('xxx', data);
  4.最好在beforeDestroy钩子回调中，用$off去解绑当前组件所用到的事件


消息订阅与发布(pubsub)
  1.一种组件间通讯的方式，适用于任意组件间通信。
  2.适用步骤：
    a.安装pubsub: npm i pubsub-js
    b.引入：import pubsub from pubsub-js
    c.接受数据：A组件想接受数据，则在A组件中订阅消息，订阅的回调留在A组件自身
      methods(){
        demo(data){....}
      }
      ....
      mounted(){
        this.pid = pubsub.subscribe('xxx', this.demo);//订阅消息
      }
      beforeDestroy(){
        pubsub.unsubscribe(this.pid);
      }
    d.提供数据：pubsub.publish('xxx', data)
    e.最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)去取消订阅

<script>
    import School from './components/School.vue'
    import Student from './components/Student.vue'

    export default {
        name: 'App',
        components:{
            School,Student,
        },
        data(){
            return {
                msg: '你好啊'
            }
        },
        methods:{
            getSchoolName(name){
                console.log('App getSchoolName:', name);
            },
            getStudentName(name,...a){ // ...a意思是，将其他参数都放到a上面
                console.log('App getStudentName:', name);
                console.log('App getStudentName:', a);
            }
        },
        mounted() {
            // 绑定自定义事件
            this.$refs.student.$on('customEvent', this.getStudentName);
            
            // this.$refs.student.$onece('customEvent', this.getStudentName);  事件修饰符
        }
    }
</script>

<style>
    .app{
        background-color: gray;
        padding: 5px;
    }
</style>

 

School.vue
<template>
    <div class="school">
        <h3>学校名字：{{name}}</h3> 
        <h3>学校地址：{{address}}</h3> 
        <button @click="sendSchoolName" >把学校名传给App</button>
    </div>
    
</template>

<script>
    export default {
        name: 'School',
        data(){
            return {
                name: 'BaiYeShu',
                address: '深圳'
            }
        },
        props:['getSchoolName'],
        methods:{
            sendSchoolName(e) {
                this.getSchoolName(this.name);
            }
        }

    }
</script>

<style scoped>
    .school{
        background-color: skyblue;
        padding: 5px;
    }
</style>

 

Student.vue
<template>
    <div class="student">
        <h3>学生姓名：{{name}}</h3>
        <h3>学生性别：{{sex}}</h3> 
        <button @click="sendStudentName">把学生名发送给App</button>
        <button @click="unbind">解绑自定义事件</button>
    </div>
</template>

<script>
    export default {
        name: 'School',
        data(){
            return {
                name: '张三',
                sex: '男',
            }
        },
        methods:{
            sendStudentName(){
                // 触发自定义事件
                this.$emit('customEvent', this.name, 1,2,3);
            },
            unbind(){
                this.$off('customEvent'); // 解绑指定事件
                // this.$off(['customEvent', 'm1']); // 解绑多个事件
                // this.$off(); // 解绑所有事件
            }
        }
    }
</script>

<style scoped>
    .student {
        background-color: pink;
        padding: 5px;
        margin-top: 30px;
    }
</style>