vue 页面传值_鸿蒙OS应用开发：事件传值

上一篇文章分享了组件的基本使用及父组件向子组件传值的内容，这次继续分享子组件向父组件(或父级页面)传值；

参考官方文档链接：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-custom-event-parameter-0000000000637785

与Vue相似，鸿蒙的子组件需要利用事件的触发和事件对象将值传递到父组件中，基本流程：

1.  定义子组件；

2.  将子组件引入到父组件中显示；

3.  在父组件中使用子组件时需要添加一个自定义事件，并绑定触发的函数；

4. 在子组件中调用this.$emit函数触发自定义的事件进行参数传递；

5. 在父组件脚本中定义事件触发的函数，接收事件对象，改变页面信息；

child2.hml：

style="width:50%; background-color:#fff; font-size:20px"> 向父组件传值

这里使用button按钮点击事件绑定sendtopar函数，在函数中调用this.$emit触发自定义事件；

child2.js：

export default {
          onInit() {
              //生命周期函数中无法直接触发this.$emit        //this.$emit('eventType1', {c2p: '接收到子组件传值'});    },    sendtopar(){
              this.$emit('eventType1', {c2p: '接收到子组件传值'});    }}

注意：组件生命周期函数onInit()和onReady()中都无法调用this.$emit；eventType1就是要触发的自定义事件@event-type1，c2p 是需要传递的值

parent.hml：

父级页面 { {title}}

title是即将被子组件传值改变的变量，@event-type1是自定义事件需要写在子组件标签中，btnClicked是事件被触发时调用的函数；

parent.js：

export default {
          data: {
              title: ''    },    btnClicked(e){
              this.title = e.detail.c2p;    }}

在btnClicked函数中利用事件对象e.detail 接收 子组件传递过来的c2p 信息，并修改title的值；

最终效果：

注：文章中将有关联的属性用同颜色加粗斜体字标注

最近有点忙，下次有空再分享利用app.js进行父子组件间的通信；

部分素材来源网络，如有侵权请联系删除