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

docs: component ref

上级 20cb9915
### 组件使用的入门教程
- 组件是视图层的基本组成单元。
- 组件是一个单独且可复用的功能模块的封装。
- 组件是视图层的基本组成单元。
- 组件是一个单独且可复用的功能模块的封装。
每个组件,包括如下几个部分:以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。
......@@ -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规范
......
......@@ -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 | - |
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册