1# 自定义组件 2 3使用兼容JS的类Web开发范式的方舟开发框架支持自定义组件，用户可根据业务需求将已有的组件进行扩展，增加自定义的私有属性和事件，封装成新的组件，方便在工程中多次调用，提高页面布局代码的可读性。具体的封装方法示例如下： 4 5 6- 构建自定义组件 7 ```html 8 <!-- comp.hml --> 9 <div class="item"> 10 <text class="title-style">{{title}}</text> 11 <text class="text-style" onclick="childClicked" focusable="true">点击这里查看隐藏文本</text> 12 <text class="text-style" if="{{showObj}}">hello world</text> 13 </div> 14 ``` 15 16 ```css 17 /* comp.css */ 18 .item { 19 width: 700px; 20 flex-direction: column; 21 height: 300px; 22 align-items: center; 23 margin-top: 100px; 24 } 25 .text-style { 26 width: 100%; 27 text-align: center; 28 font-weight: 500; 29 font-family: Courier; 30 font-size: 36px; 31 } 32 .title-style { 33 font-weight: 500; 34 font-family: Courier; 35 font-size: 50px; 36 color: #483d8b; 37 } 38 ``` 39 40 ```js 41 // comp.js 42 export default { 43 props: { 44 title: { 45 default: 'title', 46 }, 47 showObject: {}, 48 }, 49 data() { 50 return { 51 showObj: this.showObject, 52 }; 53 }, 54 childClicked () { 55 this.$emit('eventType1', {text: '收到子组件参数'}); 56 this.showObj = !this.showObj; 57 }, 58 } 59 ``` 60 61- 引入自定义组件 62 ```html 63 <!-- xxx.hml --> 64 <element name='comp' src='../../common/component/comp.hml'></element> 65 <div class="container"> 66 <text>父组件：{{text}}</text> 67 <comp title="自定义组件" show-object="{{isShow}}" @event-type1="textClicked"></comp> 68 </div> 69 ``` 70 71 ```css 72 /* xxx.css */ 73 .container { 74 background-color: #f8f8ff; 75 flex: 1; 76 flex-direction: column; 77 align-content: center; 78 } 79 ``` 80 81 ```js 82 // xxx.js 83 export default { 84 data: { 85 text: '开始', 86 isShow: false, 87 }, 88 textClicked (e) { 89 this.text = e.detail.text; 90 }, 91 } 92 ``` 93 94 95本示例中父组件通过添加自定义属性向子组件传递了名称为title的参数，子组件在props中接收。同时子组件也通过事件绑定向上传递了参数text，接收时通过e.detail获取。要绑定子组件事件，父组件事件命名必须遵循事件绑定规则，详见[自定义组件开发规范](../reference/arkui-js/js-components-custom-basic-usage.md)。自定义组件效果如下图所示： 96 97 98**图1** 自定义组件的效果 99 100 101 102
