Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
“628371f4d52df81865b9c24c124bba89a51ad1f9”上不存在“src/share/classes/java/time/chrono/MinguoChronology.java”
未验证 提交 cf3de35d 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!11461 文档整改1115 

Merge pull request !11461 from luoying_ace/ly1111
上级 7a65f104 1bcbeb41
显示空白变更内容
内联 并排
Showing with 165 addition and 161 deletion
zh-cn/application-dev/reference/arkui-js/Readme-CN.md
浏览文件 @ cf3de35d
......@@ -96,10 +96,8 @@
- 自定义组件
- [基本用法](js-components-custom-basic-usage.md)
- [数据传递与处理](js-components-custom-props.md)
- [继承样式](js-components-custom-style.md)
- [自定义事件](js-components-custom-events.md)
- [Props](js-components-custom-props.md)
- [事件参数](js-components-custom-event-parameter.md)
- [slot插槽](js-components-custom-slot.md)
- [生命周期定义](js-components-custom-lifecycle.md)
- [动态创建组件](js-components-create-elements.md)
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md
浏览文件 @ cf3de35d
......@@ -54,6 +54,8 @@
> 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分；
>
> 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。
>
> - 图片设置svg图源时，支持的标签范围有限，目前支持的svg标签包括svg、rect、circle、ellipse、path、line、polyline、polygon、animate、animateMotion、animateTransform。
## 事件
......
zh-cn/application-dev/reference/arkui-js/js-components-custom-basic-usage.md
浏览文件 @ cf3de35d
# 基本用法
# 自定义组件的基本用法
自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，从而提高代码的可读性。自定义组件通过element引入到宿主页面，使用方法如下：
```html
<element name='comp' src='../../common/component/comp.hml'></element>
<div>
......@@ -8,8 +9,8 @@
</div>
```
结合if-else使用自定义组件的示例，showComp1为true时显示自定义组件comp1，否则显示comp2：
结合if-else使用自定义组件的示例：
```html
<element name='comp1' src='../../common/component/comp1/comp1.hml'></element>
<element name='comp2' src='../../common/component/comp2/comp2.hml'></element>
......@@ -19,17 +20,142 @@
</div>
```
自定义组件的name属性指自定义组件名称(非必填)，组件名称对大小写不敏感，默认使用小写。src属性指自定义组件hml文件路径(必填)，若没有设置name属性，则默认使用hml文件名作为组件名。
## 自定义事件
父组件中绑定自定义子组件的事件使用(on|@)event-name="bindParentVmMethod"语法，子组件中通过this.$emit('eventName', { params: '传递参数' })触发事件并向上传递参数，父组件执行bindParentVmMethod方法并接收子组件传递的参数。
> **说明：**
>
> 子组件中使用驼峰命名法命名的事件，在父组件中绑定时需要使用短横线分隔命名形式，例如：\@children-event表示绑定子组件的childrenEvent事件。
**示例1：无参数传递**
子组件comp定义如下：
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text>
<text class="text-style" if="{{showObj}}">hello world</text>
</div>
```
```css
/* 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;
}
```
```js
// comp.js
export default {
data: {
showObj: false,
},
childClicked () {
this.$emit('eventType1');
this.showObj = !this.showObj;
},
}
```
引入子组件comp的父组件示例如下：
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
<div class="container">
<comp @event-type1="textClicked"></comp>
</div>
```
```css
/* xxx.css */
.container {
background-color: #f8f8ff;
flex: 1;
flex-direction: column;
align-content: center;
}
```
```js
// xxx.js
export default {
textClicked () {}
}
```
**示例2：有参数传递**
子组件comp定义如下：
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text>
<text class="text-style" if="{{ showObj }}">hello world</text>
</div>
```
```js
// comp.js
export default {
childClicked () {
this.$emit('eventType1', { text: '收到子组件参数' });
this.showObj = !this.showObj;
},
}
```
子组件向上传递参数text，父组件接收时通过e.detail来获取该参数：
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/comp/comp.hml'></element>
<div class="container">
<text>父组件：{{text}}</text>
<comp @event-type1="textClicked"></comp>
</div>
```
```js
// xxx.js
export default {
data: {
text: '开始',
},
textClicked (e) {
this.text = e.detail.text;
},
}
```
![EventParameters](figures/EventParameters.gif)
## 自定义组件数据
- name属性指自定义组件名称(非必填)，组件名称对大小写不敏感，默认使用小写。src属性指自定义组件hml文件路径(必填)，若没有设置name属性，则默认使用hml文件名作为组件名。
- 事件绑定：自定义组件中绑定子组件事件使用(on|@)child1语法，子组件中通过this.$emit('child1', { params: '传递参数' })触发事件并进行传值，父组件执行bindParentVmMethod方法并接收子组件传递的参数。
> **说明：**
> 子组件中使用驼峰命名法命名的事件，在父组件中绑定时需要使用短横线分隔命名形式，例如：\@children-event表示绑定子组件的childrenEvent事件，如 \@children-event="bindParentVmMethod"。
自定义组件的js文件中可以通过声明data、props、computed等字段完成数据的定义、传递与处理，其中props与computed的具体使用请参考[数据传递与处理](js-components-custom-props.md)章节。
**表1** 对象
**表1** 自定义组件数据
| 属性 | 类型 | 描述 |
| 名称 | 类型 | 描述 |
| -------- | --------------- | ---------------------------------------- |
| data | Object/Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;tid。<br/>data与private和public不能重合使用。(Rich) |
| props | Array/Object | props用于组件之间的通信，可以通过&lt;tag&nbsp;xxxx='value'&gt;方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;tid。目前props的数据类型不支持Function。 |
| computed | Object | 计算属性，用于在读取或设置时，进行预先处理，其结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。 |
| data | Object&nbsp;\|&nbsp;Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;tid。<br/>data与private和public不能重合使用。 |
| props | Array&nbsp;\|&nbsp;Object | props用于组件之间的数据通信，可以通过&lt;tag&nbsp;xxxx='value'&gt;方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;tid。目前props的数据类型不支持Function。 |
| computed | Object | 计算属性，用于在读取或设置参数时，进行预先处理，其结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。 |
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js/js-components-custom-event-parameter.md 已删除 100644 → 0
浏览文件 @ 7a65f104
# 事件参数
子组件也可以通过绑定的事件向上传递参数，在自定义事件上添加传递参数的示例如下：
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text>
<text class="text-style" if="{{ showObj }}">hello world</text>
</div>
```
```js
// comp.js
export default {
childClicked () {
this.$emit('eventType1', {text: '收到子组件参数'});
this.showObj = !this.showObj;
},
}
```
子组件向上传递参数text，父组件接收时通过e.detail来获取参数：
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/comp/comp.hml'></element>
<div class="container">
<text>父组件：{{text}}</text>
<comp @event-type1="textClicked"></comp>
</div>
```
```js
// xxx.js
export default {
data: {
text: '开始',
},
textClicked (e) {
this.text = e.detail.text;
},
}
```
![EventParameters](figures/EventParameters.gif)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js/js-components-custom-events.md 已删除 100644 → 0
浏览文件 @ 7a65f104
# 自定义事件
子组件comp定义如下：
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text>
<text class="text-style" if="{{showObj}}">hello world</text>
</div>
```
```css
/* 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;
}
```
```js
// comp.js
export default {
data: {
showObj: false,
},
childClicked () {
this.$emit('eventType1');
this.showObj = !this.showObj;
},
}
```
引入子组件的示例如下：
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
<div class="container">
<comp @event-type1="textClicked"></comp>
</div>
```
```css
/* xxx.css */
.container {
background-color: #f8f8ff;
flex: 1;
flex-direction: column;
align-content: center;
}
```
```js
// xxx.js
export default {
textClicked () {},
}
```
其他相关说明详见：[基本用法](./js-components-custom-basic-usage.md)。
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md
浏览文件 @ cf3de35d
# 生命周期定义
> **说明：**
>
> 从API Version 5 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -12,7 +13,7 @@
| onInit | Function | 初始化自定义组件 | 自定义组件初始化生命周期回调，当自定义组件创建时，触发该回调，主要用于自定义组件中必须使用的数据初始化，该回调只会触发一次调用。 |
| onAttached | Function | 自定义组件装载 | 自定义组件被创建后，加入到Page组件树时，触发该回调，该回调触发时，表示组件将被进行显示，该生命周期可用于初始化显示相关数据，通常用于加载图片资源、开始执行动画等场景。 |
| onLayoutReady | Function | 自定义组件布局完成 | 自定义组件插入Page组件树后，将会对自定义组件进行布局计算，调整其内容元素尺寸与位置，当布局计算结束后触发该回调。 |
| onDetached | Function | 自定义组件摘除 | 自定义组件摘除时，触发该回调，常用于停止动画或异步逻辑停止执行的场景。 |
| onDetached | Function | 自定义组件卸载 | 自定义组件卸载时，触发该回调，常用于停止动画或异步逻辑停止执行的场景。 |
| onDestroy | Function | 自定义组件销毁 | 自定义组件销毁时，触发该回调，常用于资源释放。 |
| onShow | Function | 自定义组件Page显示 | 自定义组件所在Page显示后，触发该回调。 |
| onHide | Function | 自定义组件Page隐藏 | 自定义组件所在Page隐藏后，触发该回调。 |
......@@ -23,7 +24,7 @@
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style">{{value}}</text>
<text class="text-style">{{ value }}</text>
</div>
```
......@@ -40,7 +41,7 @@ export default {
this.value = "组件挂载"
},
onDetached() {
this.value = ""
this.value = "组件卸载"
},
onShow() {
console.log("Page显示")
......
zh-cn/application-dev/reference/arkui-js/js-components-custom-props.md
浏览文件 @ cf3de35d
# Props
# 数据传递与处理
自定义组件可以通过props声明属性，父组件通过设置属性向子组件传递参数，props支持类型包括：String，Number，Boolean，Array，Object，Function。camelCase (驼峰命名法) 的 prop 名，在外部父组件传递参数时需要使用 kebab-case (短横线分隔命名) 形式，即当属性compProp在父组件引用时需要转换为comp-prop。给自定义组件添加props，通过父组件向下传递参数的示例如下：
## Props
自定义组件可以通过props声明属性，父组件通过设置属性向子组件传递参数，props支持类型包括：String，Number，Boolean，Array，Object，Function。camelCase (驼峰命名法) 的 prop 名，在外部父组件传递参数时需要使用 kebab-case (短横线分隔命名) 形式，即当属性compProp在父组件引用时需要转换为comp-prop。给自定义组件添加props，通过父组件向下传递参数的示例如下：
```html
<!-- comp.hml -->
......@@ -10,7 +12,6 @@
</div>
```
```js
// comp.js
export default {
......@@ -18,7 +19,6 @@ export default {
}
```
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp/comp.hml'></element>
......@@ -27,12 +27,11 @@ export default {
</div>
```
> **说明：**
>
> 自定义属性命名时禁止以on、@、on:、grab: 等保留关键字为开头。
## 添加默认值
### 添加默认值
子组件可以通过固定值default设置默认值，当父组件没有设置该属性时，将使用其默认值。此情况下props属性必须为对象形式，不能用数组形式，示例如下：
......@@ -64,8 +63,7 @@ export default {
</div>
```
## 数据单向性
### 数据单向性
父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将props传入的值用data接收后作为默认值，再对data的值进行修改。
......@@ -84,8 +82,7 @@ export default {
}
```
## $watch 感知数据改变
### $watch 感知数据改变
如果需要观察组件中属性变化，可以通过$watch方法增加属性变化回调。使用方法如下：
......@@ -103,9 +100,9 @@ export default {
```
## computed 计算属性
## computed
自定义组件中经常需要在读取或设置某个属性时进行预先处理，提高开发效率，此种情况就需要使用computed字段。computed字段中可通过设置属性的getter和setter方法在属性读写的时候进行触发，使用方式如下：
自定义组件中经常需要在读取或设置某个属性时进行预先处理，提高开发效率，此种情况就需要使用computed计算属性。computed字段中可通过设置属性的getter和setter方法在属性读写的时候进行触发，使用方式如下：
```js
// comp.js
......@@ -137,4 +134,4 @@ export default {
}
```
这里声明的第一个计算属性message默认只有getter函数，message的值会取决于objTitle的值的变化。getter函数只能读取不能改变设值，当需要赋值给计算属性的时候可以提供一个setter函数，如示例中的notice。
这里声明的第一个计算属性message默认只有getter函数，message的值会取决于objTitle的值的变化。getter函数只能读取不能改变参数值，例如data中初始化定义的time，当需要赋值给计算属性的时候可以提供一个setter函数，如示例中的notice。
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js/js-components-custom-slot.md
浏览文件 @ cf3de35d
# slot插槽
> **说明：**
>
> 从API Version 7 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -54,4 +55,5 @@
```
> **说明：**
>
> name 和 slot 属性不支持绑定动态数据。
zh-cn/application-dev/reference/arkui-js/js-components-custom-style.md
浏览文件 @ cf3de35d
# 继承样式
> **说明：**
>
> 从API version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
自定义组件具有inherit-class属性，定义如下：
......@@ -10,7 +12,8 @@
可以通过设置inherit-calss属性来继承父组件的样式。
父页面的hml文件，其中自定义组件comp通过inherit-class属性来指定继承其父组件的样式：parent-class1和parent-class2。
父组件的hml文件，其中自定义组件comp通过inherit-class属性来指定继承其父组件的样式，即parent-class1和parent-class2：
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
......@@ -20,7 +23,8 @@
</div>
```
父页面的css文件
父组件的css文件：
```css
/* xxx.css */
.parent-class1 {
......@@ -33,7 +37,8 @@
}
```
自定义组件的hml文件，其中parent-class1和parent-class2是从父组件继承的样式。
自定义组件的hml文件，其中parent-class1和parent-class2是从父组件继承的样式：
```html
<!--comp.hml-->
<div class="item">
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或