资讯专栏INFORMATION COLUMN

vue的$refs$emit$on$once$off的使用。

xcold / 3131人阅读

摘要:首先创建一个的空白实例兄弟组件的桥梁子组件发送放使用自定义事件把数据带过去。组件把组件数据传递给子组件接收方通过监听自定义事件的接收数据组件,传的数据为监听事件,回调函数要使用箭头函数。

1.$refs的使用场景

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

父组件:
子组件:
$emit的使用

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

子组件:


父组件:

3.$on的使用场景

兄弟组件之间相互传递数据。
首先创建一个Vue的空白实例(兄弟组件的桥梁)

import Vue from "vue";
export default new Vue();

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


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


父组件:


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102727.html

相关文章

  • Vue实例方法之事件实现

    摘要:例子触发自定义事件二源码分析事件的初始化工作我们在使用自定义事件的的时候,肯定有个地方是需要来存我们的事件和回调的地方。这里不做过多讨论自定义事件的挂载方式自定义事件的挂载是在方法中实现的。 开始 这段时间一直在看vue的源码,源码非常多和杂,所以自己结合资料和理解理出了一个主线,然后根据主线去剥离其他的一些知识点,然后将各个知识点逐一学习。这里主要是分析的事件系统的实现。 正文 一、...

    刘德刚 评论0 收藏0
  • Vue实例方法之事件实现

    摘要:例子触发自定义事件二源码分析事件的初始化工作我们在使用自定义事件的的时候,肯定有个地方是需要来存我们的事件和回调的地方。这里不做过多讨论自定义事件的挂载方式自定义事件的挂载是在方法中实现的。 开始 这段时间一直在看vue的源码,源码非常多和杂,所以自己结合资料和理解理出了一个主线,然后根据主线去剥离其他的一些知识点,然后将各个知识点逐一学习。这里主要是分析的事件系统的实现。 正文 一、...

    SwordFly 评论0 收藏0
  • 前端框架_Vue

    摘要:如果没有文件,则读取文件夹下的或者。如果都都找不到,抛出错误。 JS表达式 函数(方法)调用表达式 test() //函数调用表达式 属性调用表达式 var obj = {name:wt}; var arr = [123,bai]; obj.name //属性调用表达式 arr[0] //属性调用表达式 变量(常量)调用表达式 let name = wutao; name ...

    qieangel2013 评论0 收藏0
  • vue采用EventBus实现跨组件通信及注意事项

    摘要:挂载到添加文件第一个参数是事件对象,第二个参数是接收到消息信息,可以是任意类型事件订阅监听当前实例上的自定义事件。取消事件订阅,移除自定义事件监听器。 EventBus EventBus是一种发布/订阅事件设计模式的实践。在vue中适用于跨组件简单通信,不适应用于复杂场景多组件高频率通信,类似购物车等场景状态管理建议采用vuex。 挂载EventBus到vue.prototype 添加...

    Panda 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<