this.$emit('event-name', 123); $on $on是Vue的另一个方法,它用于监听一个事件,并在接收到该事件时执行一些操作。我们可以在$on中传递一个回调函数,这个函数会在接收到事件时被调用。下面是一些使用$on的示例: // 监听一个事件,并在接收到事件时打印消息 this.$on('event-name', function(msg) { con...
我们使用v-for进行了渲染,当我们进行删除操作时,我们调用父组件的delete绑定事件deleteHandler方法,并把删除项的id传递给父组件,然后父组件 数据操作。 以上就是我对vue中$emit和$on用法的示例。
最近在看Vue2.x的文档,发现对于$on和$emit的说明不是很清楚,不是很理解,后请教大神后才明白,特在此记录并加上自己的理解。 Vue2.x中对于$on和$emit的解释是: $on(eventName):监听事件; $emit(eventName,optionalPayload) 触发事件; 可能理解过后觉得说得挺对,但是对于像我这般初学者就不是很理解,话不多...
ref 是 vue 中提供的一种可以直接操作DOM的方式,ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上,如果是在普通的DOM元素上使用,引用指向的就是DOM元素,如果是在子组件上,引用就指向组件的实例。 $refs 是一个对象,持有已注册过 ref 的所有的子组件。 ref用法: ref 加在普通...
1、VM.$on('事件名',callback) ---callback回调$emit要传送的数据; 2、监听当前实例上自定义事件; 特别注意:$emit和$on的事件必须在一个公共的实例上,我们可以使用一个空的 Vue 实例作为中央事件总线。 二.代码示例 main.js中,创建一个空的vue实例作为事件总线,为方便调用并绑定到原型中 ...
$emit和$on的事件必须在一个公共的实例上,才能够触发。 这里需要强调的一点是:on和emit事件必须是在一个公共的实例上才能触发。 一定要记住你们可以使用一个空的 Vue 实例作为中央事件总线。别一个在二次元,一个在三次元。 `created() { bus.$on('collapse-content', msg => {this.collapse = msg; ...
vm.$on( event, callback ) 参数: {string | Array} event (数组只在 2.2.0+ 中支持) {Function} callback 用法: 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。 [ 复制代码 ](javascript:void(0); "复制代码") ...
今天我们来看看Vue的通信方法一---事件总线。在简单的场景下,可以使用一个空的Vue实例作为事件总线,具体的官方文档可看非父子组件通信。官方文档很简洁,但是像我这种菜鸟看的是一脸懵逼,官方的例子也没有(估计是认为太简单了🤣),最后自己慢慢摸索,实践,感觉事件总线还是挺好用的。 首先...
那么组件之间的通信到底是怎么实现的呢?on和emit具体是怎么实现的?我们去源码中找一找答案,let's go! // $on 的实现逻辑Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {const vm: Component = thisif (Array.isArray(event)) { for (let i = 0, l = ...
$emit和$on可以实现组件之间的传值,我们知道父组件传值给子组件使用props,但是不允许子组件传值给父组件,这时候使用这个就可以实现了。这也可以用在兄弟组件之间的通信。 注意:$emit和$on的事件必须在一个公共的实例上,才能够触发。 例子:我要实现某个系统的通讯录功能,在web端我们可以使用基于jQuery的ztree插件...