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

Posted 2021-09-14 华为开发者论坛

自定义组件是一个开发者编写的组件，使用起来和 Native 一样，最终按照组件的<template>来渲染；同时开发起来又和页面一样，拥有 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/...

组件介绍：https://developer.huawei.com/...

原文链接：https://developer.huawei.com/...
原作者：Mayism