Vue:自定义组件事件

一、直接在组件标签上绑定事件

1、关于组件的自定义事件,实现步骤:

①提供事件源(这个事件源是一个组件)②给组件绑定事件:v-on:事件名  或者  @事件名

③编写回调函数,将回调函数和事件进行绑定。

④等待事件的触发,只要事件触发,则执行回调函数。

对于组件自定义事件来说,要想让事件发生,需要去执行一段代码。

这段代码负责去触发这个事件,让这个事件发生。

事件绑定在A组件上,则触发这个事件的代码要在A组件当中编写。

2、总结:父子组件之间的通信

①父---子:props

②子---父:在父中定义一个方法,将方法传递给子,然后在子中调用父传过来的方法,这样给父传数据。(这种方式以后很少使用)

使用组件的自定义事件的方式,也可以完成子向父传数据。

在父组件当中绑定事件。在子组件当中触发事件。即:父绑定,子触发。

对于事件的once修饰符来说,组件的自定义事件也是可以使用的。

3、相关代码

子组件



this.$emit中的this指向的是组件实例,触发的同时可以给事件绑定的回调函数传数据 

父组件



二、通过代码给组件绑定事件

在父组件当中:

mounted(){ // 表示挂载完毕后给组件绑定事件。
    // 这种方式更加灵活。例如:希望 AJAX 请求响应回来数据之后再给组件绑定事件。
    this.$refs.user .$on('one', this.first)
}
this.$refs.user.$once('one', this.first) 表示只触发一次。
绑定时要注意:
this.$refs.user.$on('one', function(){
    //这里的 this 是子组件实例(user 组件实例)
})
this.$refs.user.$on('one', ()=>// 这里的 this 是父组件实例(App 组件实例) })
this.first这个回调函数写成普通函数时:函数体中 this 是子组件实例。(user组件实例)
this.first这个回调函数写成箭头函数时:函数体中 this 是父组件实例。(App 组件实例)

 三、解绑事件

methods : {
    unbinding(){
        this.$off(‘event1’) // 这种方式只能解绑一个事件。
        this.$off([‘event1’, ‘event2’]) // 这种方式解绑多个事件。
        this.$off() // 解绑所有事件。
    }
}
注意: vm vc 销毁的时候,所有组件以及子组件当中的事件会全部解绑。

四、全局事件总线 

1、原理:

给项目中所有的组件找一个共享的 vc 对象。把这个共享的对象 vc 叫做全局事件总线。所有的事件都可以 绑定到这个共享对象上。所有组件都通过这个全局事件总线对象来传递数据。这种方式可以完美的完成兄弟组件之间传递数据。

2、共享对象必须具备两个特征:

① 能够让所有的 vc 共享。
main.js 文件中:
// 获取 VueComponent 构造函数
const VueComponentConstructor = Vue.extend({})
// 创建 vc
const vc = new VueComponentConstructor()
// 让所有的 vc 都能够使用这个 vc
Vue.prototype.$bus = vc
② 共享对象上有$on$off$emit 等方法。(建议)
main.js 文件中:
new Vue({
    el : '#app',
    render : h => h(App),
    beforeCreate(){
        Vue.prototype.$bus = this
    }
})
:A 组件向 B 组件传数据,应该在 B 组件中绑定事件(接),应该在 A组件中触发事件(传)。
Vue:自定义组件事件_第1张图片 

3、事件类型

数据发送方:触发事件

methods : {
    triggerFirst(){
    this.$bus.$emit(‘one’, 传数据)
    }
}

数据接收发:绑定事件

mounted(){
    this.$bus.$on(‘one’, this.first)
}

组件销毁:组件实例被销毁前,将绑定在$bus 上的事件解绑。

beforeDestroy(){
    this.$bus.off(‘one’)
}

你可能感兴趣的:(Vue,vue.js,前端,javascript)