自定義元件是一個開發者編寫的元件，使用起來和 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