From 6e7d49d2eb3bb79510d888515fd2b49dd57caaab Mon Sep 17 00:00:00 2001
From: qiang <guoshengqiang@live.com>
Date: Mon, 22 Mar 2021 19:26:27 +0800
Subject: [PATCH] docs: component ref

---
 docs/component/README.md | 144 +++++++++++++++++++--------------------
 docs/vue-api.md          |   2 +-
 2 files changed, 73 insertions(+), 73 deletions(-)

diff --git a/docs/component/README.md b/docs/component/README.md
index 71aecace6..b8529664e 100644
--- a/docs/component/README.md
+++ b/docs/component/README.md
@@ -1,6 +1,6 @@
 ### 组件使用的入门教程
-- 组件是视图层的基本组成单元。
-- 组件是一个单独且可复用的功能模块的封装。
+- 组件是视图层的基本组成单元。
+- 组件是一个单独且可复用的功能模块的封装。
 
 每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。
 
@@ -16,18 +16,18 @@
 	content
 </component-name>
 ```
-
-下面是一个基本组件的实例，在一个vue页面的根`<view>`组件下插入一个`<button>`组件。给这个组件的内容区写上文字“按钮”，同时给这个组件设置了一个属性“size”，并且“size”属性的值设为了“mini”。
+
+下面是一个基本组件的实例，在一个vue页面的根`<view>`组件下插入一个`<button>`组件。给这个组件的内容区写上文字“按钮”，同时给这个组件设置了一个属性“size”，并且“size”属性的值设为了“mini”。
 
 > 注：按照[vue单文件组件规范](https://cn.vuejs.org/v2/guide/single-file-components.html)，每个vue文件的根节点必须为 `<template>`，且这个 `<template>` 下只能且必须有一个根 `<view>` 组件。
 
-```html
-<template>
-	<view>
-		<button size="mini">按钮</button>
-	</view>
-</template>
-```
+```html
+<template>
+	<view>
+		<button size="mini">按钮</button>
+	</view>
+</template>
+```
 
 通过了解[button组件](/component/button)的文档，我们知道上述代码将在页面中绘制一个按钮，按钮显示的文字是“按钮”，按钮的大小是小尺寸的。
 
@@ -48,10 +48,10 @@
 下面的例子演示了组件的属性设置bool值和数字的例子。注意`false`作为一个js变量，在组件的属性中使用时，属性前面需增加`:`冒号前缀，属性值仍使用引号包裹，但引号里不是字符串，而是js。
 
 ```html
-<template>
-	<view>
-		<button size="mini" :disabled="false" hover-start-time=20 >按钮</button>
-	</view>
+<template>
+	<view>
+		<button size="mini" :disabled="false" hover-start-time=20 >按钮</button>
+	</view>
 </template>
 ```
 
@@ -62,7 +62,7 @@
 |属性名|类型|描述|注解|
 |:-|:-|:-|:-|
 |id|String|组件的唯一标示|保持整个页面唯一|
-|ref|String|vue中组件的唯一标示|在vue的js中可通过this.$refs.xxx获取到组件对象|
+|ref|String|vue中组件的唯一标示|用来给子组件注册引用信息，详见 [Vue 文档](/vue-api?id=%e7%89%b9%e6%ae%8a%e5%b1%9e%e6%80%a7)|
 |class|String|组件的样式类|在对应的 css 中定义的样式类|
 |style|String|组件的内联样式|可以动态设置的内联样式|
 |hidden|Boolean|组件是否隐藏|所有组件默认是显示的|
@@ -79,20 +79,20 @@
 下面的button组件示例，等价于上一个的示例。只不过静态内容改成动态js。
 
 ```html
-<template>
-	<view>
-		<button size="mini" :disabled="buttondisble" hover-start-time=20 >{{buttonText}}</button>
-	</view>
+<template>
+	<view>
+		<button size="mini" :disabled="buttondisble" hover-start-time=20 >{{buttonText}}</button>
+	</view>
 </template>
-<script>
-	export default {
-		data() {
-			return {
+<script>
+	export default {
+		data() {
+			return {
 				"buttonText":"按钮",
-				"buttondisble":false
-			}
-		}
-	}
+				"buttondisble":false
+			}
+		}
+	}
 </script>
 ```
 
@@ -108,24 +108,24 @@
 - click是button组件的点击事件，在用户点击这个button时触发
 - click指向了methods中定义的goto方法，并且传递了一个参数'/pages/about/about'
 
-```html
-<template>
-	<view>
-		<button size="mini" @click="goto('/pages/about/about')">按钮</button>
-	</view>
+```html
+<template>
+	<view>
+		<button size="mini" @click="goto('/pages/about/about')">按钮</button>
+	</view>
 </template>
-<script>
-    export default {
-        methods: {
-            goto(url) {
-                console.log("传入的参数是：" + url)
-            }
-        }
-    }
-</script>
+<script>
+    export default {
+        methods: {
+            goto(url) {
+                console.log("传入的参数是：" + url)
+            }
+        }
+    }
+</script>
 ```
 
-
+
 
 ### 基础组件
 
@@ -144,15 +144,15 @@ uni-app为开发者提供了一系列基础组件，类似HTML里的基础标签
 开发者可以通过组合这些基础组件进行快速开发。在需要复用的情况下可封装成扩展组件。
 
 
-`uni-app` 基础组件规范，与小程序规范相近。如果了解小程序开发的话，uni-app的基础组件会感觉很熟悉。但需要注意组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 `@change="eventName"`
-
-```html
-	<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="bindDateChange">
-		<view class="picker">
-		  当前选择: {{date}}
-		</view>
-	</picker>
-```
+`uni-app` 基础组件规范，与小程序规范相近。如果了解小程序开发的话，uni-app的基础组件会感觉很熟悉。但需要注意组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 `@change="eventName"`
+
+```html
+	<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="bindDateChange">
+		<view class="picker">
+		  当前选择: {{date}}
+		</view>
+	</picker>
+```
 
 
 #### 基础组件列表
@@ -258,8 +258,8 @@ uni-app为开发者提供了一系列基础组件，类似HTML里的基础标签
 **各平台专有组件**
 
 在小程序平台和nvue平台，还有一些专有组件，比如open-data，详见左侧导航
-
-### 扩展组件的意义
+
+### 扩展组件的意义
 
 虽然所有的业务需求都可以通过基础组件满足，但仅有基础组件是低效的，实际开发中会有很多封装的组件。
 
@@ -277,19 +277,19 @@ uni-app为开发者提供了一系列基础组件，类似HTML里的基础标签
 ```
 
 封装扩展组件的优势：
-
-- 可以将组件进行任意次数的复用。
-- 合理的划分组件，有助于提高应用性能。
-- 代码更加方便组织和管理，并且扩展性也更强，便于多人协同开发。
+
+- 可以将组件进行任意次数的复用。
+- 合理的划分组件，有助于提高应用性能。
+- 代码更加方便组织和管理，并且扩展性也更强，便于多人协同开发。
 - 组件化开发能大幅度提高应用开发效率、测试性、复用性等。
 
-### 组件的类别
+### 组件的类别
 
 uni-app支持的组件分为vue组件和小程序自定义组件。
 
 如果你还不了解这两种组件，可以参阅各自的文档
 - vue组件：[文档](/vue-componets)
-- 小程序自定义组件：其规范不是vue规范，而是小程序规范，[文档](/frame?id=%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%bb%84%e4%bb%b6%e6%94%af%e6%8c%81)
+- 小程序自定义组件：其规范不是vue规范，而是小程序规范，[文档](/frame?id=%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%bb%84%e4%bb%b6%e6%94%af%e6%8c%81)
 
 日常开发来讲，推荐使用vue组件。uni-app支持小程序组件只要是为了兼容更多生态资源。
 
@@ -347,18 +347,18 @@ uni-app支持的组件分为vue组件和小程序自定义组件。
 2. components里注册组件
 3. template中使用组件
 
-```html
-	<template>
-		<view>
-			<uni-rate text="1"></uni-rate><!-- 3.使用组件 -->
-		</view>
-	</template>
-	<script>
-		import uniRate from '@/components/uni-rate/uni-rate.vue';//1.导入组件
-		export default {
-			components:{uniRate }//2.注册组件
-		}
-	</script>
+```html
+	<template>
+		<view>
+			<uni-rate text="1"></uni-rate><!-- 3.使用组件 -->
+		</view>
+	</template>
+	<script>
+		import uniRate from '@/components/uni-rate/uni-rate.vue';//1.导入组件
+		export default {
+			components:{uniRate }//2.注册组件
+		}
+	</script>
 ```
 
 ### uni_module规范
diff --git a/docs/vue-api.md b/docs/vue-api.md
index d228c2c6b..ed13b2c34 100644
--- a/docs/vue-api.md
+++ b/docs/vue-api.md
@@ -142,7 +142,7 @@
 |特殊属性		|描述						|H5		|App端|微信小程序  |说明	|
 | --				| --						| --	|--		|--			| --	|
 |key	| 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes [详情](https://cn.vuejs.org/v2/api/#key) 	|√	| √	| √		|App端旧版不支持表达式		|
-|ref	| ref 被用来给元素或子组件注册引用信息 [详情](https://cn.vuejs.org/v2/api/#ref) 	|√	| √	| √		|		|
+|ref	| ref 被用来给元素或子组件注册引用信息 [详情](https://cn.vuejs.org/v2/api/#ref) 	|√	| √	| √		|非 H5 平台只能获取 vue 组件实例不能获取到内置组件实例|
 |is	| 用于动态组件且基于 DOM 内模板的限制来工作 [详情](https://cn.vuejs.org/v2/api/#is) 	|√	| √	| x		|	-	|
 
 
-- 
GitLab