harmony(鸿蒙)自定义事件

  • 2022-08-09
  • 浏览 (632)

自定义事件

子组件comp定义如下:

<!-- comp.hml -->
<div class="item">  
   <text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text> 
   <text class="text-style" if="{{showObj}}">hello world</text> 
</div>
/* comp.css */
.item {  
  width: 700px;   
  flex-direction: column;   
  height: 300px;   
  align-items: center;   
  margin-top: 100px;  
} 
.text-style { 
  font-weight: 500; 
  font-family: Courier; 
  font-size: 40px;
}
// comp.js
export default { 
  data: {  
    showObj: false,  
  },  
  childClicked () {  
    this.$emit('eventType1'); 
    this.showObj = !this.showObj;  
  },  
}

引入子组件的示例如下:

<!-- xxx.hml --> 
<element name='comp' src='../../common/component/comp.hml'></element>  
<div class="container">  
  <comp @event-type1="textClicked"></comp>  
</div>
/* xxx.css */
.container {  
  background-color: #f8f8ff;  
  flex: 1;  
  flex-direction: column;  
  align-content: center; 
} 
// xxx.js
export default {    
  textClicked () {},  
}

其他相关说明详见:基本用法

你可能感兴趣的鸿蒙文章

harmony(鸿蒙)兼容JS的类Web开发范式

harmony(鸿蒙)数据类型说明

harmony(鸿蒙)button

harmony(鸿蒙)chart

harmony(鸿蒙)divider

harmony(鸿蒙)image-animator

harmony(鸿蒙)image

harmony(鸿蒙)input

harmony(鸿蒙)label

harmony(鸿蒙)marquee

0  赞