vue.js怎么传递参数 emit on

JavaScript023

vue.js怎么传递参数 emit on,第1张

// emit 是用来抛出事件(方法)的,如:

this.$emit('eventName', params)  // eventName: 事件名 params: 参数,多个时使用,号隔开

// on 是用来监控emit抛出的事件(方法)的,如:

this.$on('eventClick', params)

methods: {

    eventClick: function(params) {

    }

}

// 大概就是这样子,希望能帮到你~

父组件调用子组件的方法,可以传递数据。

父组件:

子组件:

子组件调用父组件的方法并传递数据。

子组件:

父组件:

兄弟组件之间相互传递数据。

首先创建一个vue的空白实例(兄弟组件的桥梁)

子组件a:发送放使用$emit自定义事件把数据带过去。

子组件b:接收方通过$on监听自定义事件的callback接收数据

父组件:

监听一个自定义事件,但是只触发一次。一旦触发之后,监听器就会被移除。

将on变成once,即只执行一次。

移除自定义事件监听器,语法:vm.$off( [event, callback] )

如果没有提供参数,则移除所有的事件监听器;(注意这条,一般在main.js中,移除所有事件绑定)

如果只提供了事件,则移除该事件所有的监听器;

如果同时提供了事件与回调,则只移除这个回调的监听器。

在Vue中,父组件监听子组件触发的事件,需要在子组件用使用 $emit 触发,在父组件中使用 v-on: / @ 自定义事件监听。

1、 vm.$emit( eventName, […args] ) 可以有两个参数;第一个参数必填,触发当前实例上的函数;第二个参数选填,是向函数传递的数据。

2、在vue中,事件名不存在自动化的大小写转换,触发事件名需要完全匹配监听这个事件所用的名称(驼峰就必须驼峰,短横线就必须短横线。)

3、父组件监听子组件触发的事件,不能用$on侦听子组件抛出的事件,而必须在模板里直接用v-on绑定子组件的事件。

【父组件】

【子组件】

点击按钮

出现弹框,内容在num1、numb2、number3里随机。