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

自定义组件是一个开发者编写的组件,使用起来和 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/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


上一篇:WEBGIS ,ARCGIS JAVASCRIPT的基本操作


下一篇:flex urlLoader post/get