如何实现子组件向父组件传值

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

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

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

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

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

父组件

<import name="comp1" src="./comp1.ux"></import>
<template>
  <div style="flex-direction: column;">
    <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 style="flex-direction: column;">
    <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>

欲了解更多详情，请参阅：

快应用开发指导文档：https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper

组件介绍：https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-template

原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0204411993708700389?fid=18
原作者：Mayism

今天的文章如何实现子组件向父组件传值分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。