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

这篇文章给大家介绍如何通过$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 class="child-demo"> <text>我是子组件一count:{{compCount}}</text> <input type="button" onclick='addHandler' value='add'></input> </div> </template> <script> export default { props: ['count'], data(){ return{ compCount:this.count } }, addHandler(){ this.compCount ++ this.$emit('emitEvt',{ count:this.compCount }) } } </script>`

方法二 子组件调用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 class="child-demo"> <text>我是子组件二num:{{compNum}}</text> <input type="button" onclick='delHandler' value='del'></input> </div> </template> <script> export default { props: ['num'], data(){ return{ compNum:this.num } }, delHandler(){ this.compNum -- this.$dispatch('dispathEvt',{ num:this.compNum }) } } </script>`

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