关于android:如何实现子组件向父组件传值

42次阅读

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

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

正文完