如何通过$emit()和$dispatch()实现子组件向父组件传值

16次阅读
没有评论

这篇文章给大家介绍如何通过 $emit() 和 $dispatch() 实现子组件向父组件传值,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

自定义组件是一个开发者编写的组件,使用起来和 Native 一样,最终按照组件的 template 来渲染;同时开发起来又和页面一样,拥有 ViewModel 实现对数据、事件、方法的管理。自定义组件也叫子组件,因为它不能独立存在,需要被引入到页面上才能生效。子组件避免一个页面的布局庞大、臃肿,而且使代码可读性好、易维护。

子组件如何向父组件传值呢?比如当子组件对数据进行改造后,如何把最终数据交给父组件呢?主要有两种方法:

子组件通过 $emit() 触发在节点上绑定的自定义事件来执行父组件的方法。

子组件通过 $dispatch() 触发自定义事件,父组件通过 $on() 监控自定义事件的触发。

解决方案方法一

子组件通过 $emit() 触发在节点上绑定的自定义事件来执行父组件的方法,如下例子中实现了如何将子组件中的 count 值传递到父组件上。子组件定义了 emitEvt 事件(父组件中引用时,需要添加 on 前缀),子组件在调用 $emit() 时,携带了 count 参数,父组件在响应事件时,便可获取到参数值。

!–**** 父组件 – ` import name= comp1 src= ./comp1.ux /import template

div text 我是父组件 count:{{fcount}} /text comp1 count= {{fcount}} onemit-evt= emitEvt /comp1 /div /template script export default {private:{ fcount:20}, emitEvt(evt){this.fcount = evt.detail.count} } /script `

!– 子组件 comp1 —

` template

div >

方法二 子组件调用 childVm.$dispath() 完成向上传递。子组件通过 $dispatch() 触发自定义事件,父组件通过 $on() 监控自定义事件的触发,自定义事件中控制 num 的变化,父组件中通过 evt.detail 获取子组件中的 num 的值赋值给父组件。

!– 父组件 —

` import name= comp1 src= ./comp1.ux /import template

div text 我是父组件 fnum:{{fnum}} /text comp2 num= {{fnum}} /comp2 /div /template script export default {private:{ fnum:20}, onInit(){ this.$on( dispathEvt ,this.dispathEvt) }, dispathEvt(evt){this.fnum = evt.detail.num} } /script `

!– 子组件 comp2 —

` template

div >

关于如何通过 $emit() 和 $dispatch() 实现子组件向父组件传值就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。