1# 自定义组件的基本用法 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @seaside_wu1--> 5<!--Designer: @shiyu_huang--> 6<!--Tester: @TerryTsao--> 7<!--Adviser: @HelloCrease--> 8 9自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，从而提高代码的可读性。自定义组件通过element引入到宿主页面，使用方法如下： 10 11```html 12<element name='comp' src='../common/component/comp.hml'></element> 13<div> 14 <comp prop1='xxxx' @child1="bindParentVmMethod"></comp> 15</div> 16``` 17 18结合if-else使用自定义组件的示例，showComp1为true时显示自定义组件comp1，否则显示comp2： 19 20```html 21<element name='comp1' src='../common/component/comp1/comp1.hml'></element> 22<element name='comp2' src='../common/component/comp2/comp2.hml'></element> 23<div> 24 <comp1 if="{{showComp1}}" prop1='xxxx' @child1="bindParentVmMethodOne"></comp1> 25 <comp2 else prop1='xxxx' @child1="bindParentVmMethodTwo"></comp2> 26</div> 27``` 28 29自定义组件的name属性指自定义组件名称(非必填)，组件名称对大小写不敏感，默认使用小写。src属性指自定义组件hml文件路径(必填)，若没有设置name属性，则默认使用hml文件名作为组件名。 30 31 32## 自定义事件 33 34父组件中绑定自定义子组件的事件使用(on|@)event-name="bindParentVmMethod"语法，子组件中通过this.$emit('eventName', { params: '传递参数' })触发事件并向上传递参数，父组件执行bindParentVmMethod方法并接收子组件传递的参数。 35 36> **说明：** 37> 38> 子组件中使用驼峰命名法命名的事件，在父组件中绑定时需要使用短横线分隔命名形式，例如：\@children-event表示绑定子组件的childrenEvent事件。 39 40**示例1：无参数传递** 41 42子组件comp定义如下： 43 44```html 45<!-- comp.hml --> 46<div class="item"> 47 <text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text> 48 <text class="text-style" if="{{showObj}}">hello world</text> 49</div> 50``` 51 52```css 53/* comp.css */ 54.item { 55 width: 700px; 56 flex-direction: column; 57 height: 300px; 58 align-items: center; 59 margin-top: 100px; 60} 61.text-style { 62 font-weight: 500; 63 font-family: Courier; 64 font-size: 40px; 65} 66``` 67 68```js 69// comp.js 70export default { 71 data: { 72 showObj: false, 73 }, 74 childClicked () { 75 this.$emit('eventType1'); 76 this.showObj = !this.showObj; 77 }, 78} 79``` 80 81引入子组件comp的父组件示例如下： 82 83```html 84<!-- xxx.hml --> 85<element name='comp' src='../common/component/comp.hml'></element> 86<div class="container"> 87 <comp @event-type1="textClicked"></comp> 88</div> 89``` 90 91```css 92/* xxx.css */ 93.container { 94 background-color: #f8f8ff; 95 flex: 1; 96 flex-direction: column; 97 align-content: center; 98} 99``` 100 101```js 102// xxx.js 103export default { 104 textClicked () {} 105} 106``` 107 108**示例2：有参数传递** 109 110子组件comp定义如下： 111 112```html 113<!-- comp.hml --> 114<div class="item"> 115 <text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text> 116 <text class="text-style" if="{{ showObj }}">hello world</text> 117</div> 118``` 119 120```js 121// comp.js 122export default { 123 childClicked () { 124 this.$emit('eventType1', { text: '收到子组件参数' }); 125 this.showObj = !this.showObj; 126 }, 127} 128``` 129 130子组件向上传递参数text，父组件接收时通过e.detail来获取该参数： 131 132```html 133<!-- xxx.hml --> 134<element name='comp' src='../common/comp/comp.hml'></element> 135<div class="container"> 136 <text>父组件：{{text}}</text> 137 <comp @event-type1="textClicked"></comp> 138</div> 139``` 140 141```js 142// xxx.js 143export default { 144 data: { 145 text: '开始', 146 }, 147 textClicked (e) { 148 this.text = e.detail.text; 149 }, 150} 151``` 152 153 154 155 156## 自定义组件数据 157 158 159自定义组件的js文件中可以通过声明data、props、computed等字段完成数据的定义、传递与处理，其中props与computed的具体使用请参考[数据传递与处理](js-components-custom-props.md)章节。 160 161**表1** 自定义组件数据 162 163| 名称 | 类型 | 描述 | 164| -------- | --------------- | ---------------------------------------- | 165| data | Object \| Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。<br/>data与private和public不能重合使用。 | 166| props | Array \| Object | props用于组件之间的数据通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。 | 167| computed | Object | 计算属性，用于在读取或设置参数时，进行预先处理，其结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。 |
