Vue2：用ref方式绑定自定义事件的注意事项-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue2：用ref方式绑定自定义事件的注意事项。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、场景描述

我们知道绑定自定义事件可以用ref方式实现。
但是，这个方式，需要注意下，否则，实现不了我们的效果。

需求是这样的，我们通过ref绑定的事件，来给App的data块中的变量赋值。

二、绑定自定义事件

基本写法：
父组件App中
methods函数：

getStudentName(name,...params){
    console.log('App收到了学生名：',name,params)
    this.studentName = name
}

给Student组件绑定自定义事件test

        mounted() {
            this.$refs.student.$on('test',this.getStudentName) //绑定自定义事件（一次性）
        }

此处的this是谁了？
其实，是Student组件的vc实例。Vue约定，谁触发的事件，那么，这个this就是谁。
但是，此处的this调用的函数，在App组件的methods中，所以，在getStudentName函数中的this，又变成了App组件的vc实例。

无效写法

            this.$refs.student.$on('test',function () {
                console.log('App收到了学生名：',name,params)
                this.studentName = name
            })

原因就是，此时function里面的this是Student的vc实例，无法获取到studentName变量，所以，赋值失败。

改进写法：

            //这种写法，可以给studentName变量赋值。
            this.$refs.student.$on('test',(name,...params) => {
                console.log('App收到了学生名：',name,params)
                this.studentName = name
            })

换成箭头函数，就可以实现基本写法的效果。为什么了？
因为，箭头函数没有自己的this，于是，Vue需要向外部寻找，这是，找到的this就是App组件的vc实例。
从而实现对studentName变量的赋值。文章来源地址https://www.toymoban.com/news/detail-806446.html

到了这里，关于Vue2：用ref方式绑定自定义事件的注意事项的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！