revise doc

Signed-off-by: N luoying_ace_admin <luoying19@huawei.com>

revise doc
Signed-off-by: N luoying_ace_admin <luoying19@huawei.com>
1bcbeb41 · luoying_ace_admin · c1b78d78 · 1bcbeb41 · 1bcbeb41 · 1bcbeb41
9 changed file
--- a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md
+++ b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md
@@ -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)

--- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md
@@ -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。


 ## 事件

--- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-basic-usage.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-basic-usage.md
-# 基本用法
+# 自定义组件的基本用法

 自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，从而提高代码的可读性。自定义组件通过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
--- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-event-parameter.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-event-parameter.md
-# 事件参数
-
-子组件也可以通过绑定的事件向上传递参数，在自定义事件上添加传递参数的示例如下：
-
-
-```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
--- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-events.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-events.md
-# 自定义事件
-
-子组件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
--- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md
 # 生命周期定义

 >  **说明：**
+>
 >  从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显示")

--- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-props.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-props.md
-# 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
--- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-slot.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-slot.md
 # slot插槽

 >  **说明：**
+>
 >  从API Version 7 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。


@@ -54,4 +55,5 @@
 ```

 >  **说明：**
+>
 >  name 和 slot 属性不支持绑定动态数据。
--- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-style.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-style.md
 # 继承样式 
+
 > **说明：**
+>
 > 从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">