Vue组件的自定义事件

自定义事件：一种组件间通信的方式，适用于：子组件 → 父组件

使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

 

1、绑定事件

给组件的实例对象进行绑定事件

第一种方式

在组件标签中通过@xxx或者v-on:xxx来绑定事件。@是v-on的简写形式

<!-- 使用@定义xuexi事件，指定了事件的回调函数是study -->
<Student @xuexi="study"/> 

<!-- 加上once，事件只能触发一次 -->
<Student @xuexi.once="study"/> 

<!-- 使用v-on定义xuexi事件 -->
<Student v-on:xuexi="study"/>

 

第二种方式

 在组件标签中定义ref，使用$refs来绑定事件

<!-- 给组件标签定义ref -->
<Student ref="zhangsan"/>

<script>
    //通过$refs来绑定事件
    //给学生zhangsan绑定了事件xuexi，事件回调函数是study
    this.$refs.zhangsan.$on('xuexi',this.study)

    //使用once，事件只触发一次
    this.$refs.zhangsan.$once('xuexi',this.study) 

    //使用匿名函数的方式（有问题）
    this.$refs.zhangsan.$on('xuexi',function(name,params){
        console.info(this)//this是Student组件，即被绑定事件的那个组件
    })

    //使用箭头函数（没有问题）
    this.$refs.zhangsan.$on('xuexi',(name,params) => {
        console.info(this)//this是App组件
    })
</script>

 

这种方式会更灵活，可以增加业务逻辑的处理

2、触发事件

给谁绑的，谁来触发

上面给Student组件绑定了xuexi事件，那么就需要在Student组件里去提供触发该事件的

//通过$emit，去触发xuexi事件，后面的都是参数
this.$emit('xuexi',this.yuwen,666,888,900)

3、解绑事件

通过$off来解绑事件

this.$off('xuexi') //解绑组件上的xuexi事件

this.$off(['xuexi','demo']) //解绑组件上多个自定义事件

this.$off() //解绑组件上所有的自定义事件

当组件被销毁时，绑定的事件也自然是失效的

4、案例 

案例一：@或v-on方式

学生组件

<template>
    <div class="student">
        <h2>科目：{{yuwen}}</h2>
        <button @click="startStudy">学习</button>
        <button @click="unbind">解绑事件</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                yuwen:'语文'
            }
        },
        methods: {
            startStudy(){
                //学生组件里，点击按钮时，触发Student组件实例身上的xuexi事件
                //第一个参数是触发的事件名，后面的都是参数
                this.$emit('xuexi',this.yuwen,666,888,900)
            },
            unbind(){
                this.$off('xuexi') //解绑一个自定义事件
                // this.$off(['xuexi','demo']) //解绑多个自定义事件
                // this.$off() //解绑所有的自定义事件
            },
        }
    }
</script>
<style  scoped>
    .student{
        background-color: pink;
        padding: 5px;
        margin-top: 30px;
    }
</style>

 App组件

<template>
    <div class="app">
        <h1>{{msg}}，学生学习的科目是:{{className}}</h1>

        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 
            1、给学生绑定了一个一个事件：xuexi
            2、指定了事件的回调函数是study
            3、需要在Student组件里指定触发该事件的场景：触发方式是通过$emit
        -->
        <Student @xuexi="study"/>
    </div>
</template>

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

    export default {
        name:'App',
        components:{Student},
        data() {
            return {
                msg:'你好啊！',
                className:''
            }
        },
        methods: {
            study(name,...params){
                console.log('App收到了学生学习的科目：',name,params)
                this.className = name
            }
        }
    }
</script>

 

案例二：ref方式

学生组件同案例一，只需修改APP组件

 

<template>    
    <div class="app">
        <h1>{{msg}}，学生学习的科目是:{{className}}</h1>
        <!-- 
            1、给学生组件定义ref属性
            2、使用$on绑定xuexi事件
        -->
        <Student ref="zhangsan"/>
    </div>
</template>

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

    export default {
        name:'App',
        components:{Student},
        data() {
            return {
                msg:'你好啊！',
                className:''
            }
        },
        methods: {
            study(name,...params){
                console.log('App收到了学生学习的科目：',name,params)
                this.className = name
            }
        },
        mounted() {
            //找到通过ref找到Student组件，通过$on给该组件绑定xuexi事件，然后指定回调函数study
            //通过ref方式，可以在这里增加业务逻辑
            this.$refs.zhangsan.$on('xuexi',this.study)
            // this.$refs.zhangsan.$once('xuexi',this.study) //只调用一次

            /**
            //使用匿名函数的方式（有问题）
            this.$refs.zhangsan.$on('xuexi',function(name,params){
                console.info(this) //this是Student组件，即被绑定事件的那个组件
            })

            //使用箭头函数（没有问题）
            this.$refs.zhangsan.$on('xuexi',(name,params) => {
                console.info(this) //this是App组件
            })
            */
        },
    }
</script>

 

 

组件绑定原生事件

<!-- 绑定原生的click事件，需要加上native，否则会被当做是自定义事件 -->
<Student @click.native="show"/>