提交 6e7d49d2 编写于 作者: Q qiang

docs: component ref

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