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

共计 1287 个字符，预计需要花费 4 分钟才能阅读完成。

这篇文章给大家介绍如何通过 $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() 实现子组件向父组件传值就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。