Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
ff9456d5
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3216
Star
106
Fork
815
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
94
列表
看板
标记
里程碑
合并请求
70
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
94
Issue
94
列表
看板
标记
里程碑
合并请求
70
合并请求
70
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
ff9456d5
编写于
10月 20, 2023
作者:
W
wanganxp
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
x
上级
3e9a0d43
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
79 addition
and
25 deletion
+79
-25
docs/uni-app-x/component/README.md
docs/uni-app-x/component/README.md
+78
-17
docs/uni-app-x/component/list-view.md
docs/uni-app-x/component/list-view.md
+0
-1
docs/uni-app-x/component/text.md
docs/uni-app-x/component/text.md
+0
-1
docs/uni-app-x/component/video.md
docs/uni-app-x/component/video.md
+0
-1
docs/uni-app-x/tutorial/codegap.md
docs/uni-app-x/tutorial/codegap.md
+1
-1
docs/uni-app-x/vue/README.md
docs/uni-app-x/vue/README.md
+0
-4
未找到文件。
docs/uni-app-x/component/README.md
浏览文件 @
ff9456d5
...
...
@@ -172,14 +172,12 @@ export default {
## vue 与 uvue 不同文件后缀的优先级 @priority
新建组件时,默认组件的后缀名为.
vue。而不是.u
vue。
新建组件时,默认组件的后缀名为.
uvue,但也支持.
vue。
.vue里面写uvue的语法,可以正常被.uvue页面引用和编译。
.vue里写条件编译,可以制作同时满足uni-app和uni-app x的组件。
但是uni-app x也支持.uvue文件的组件。
当你手动import或easycom手动配置规则,可以指定文件名后缀。比如
`import PageHead from '@/components/page-head.uvue'`
但如果未明确指定组件后缀名的情况,且同一个组件目录下即存在.vue文件、又存在.uvue文件,
...
...
@@ -190,19 +188,19 @@ export default {
## 调用组件方法@methods
支持以下
`3`
种方法调用组件内部方法或属性
需要把组件分为 内置组件、easycom组件、非easycom组件,这3种组件有不同的方法调用方式。
###
调用内置组件方法
或设置属性
###
内置组件的方法调用
或设置属性
3.
93+ 支持
>
3.93+ 支持
使用
`this.$refs`
获取组件并
转换为组件的类型,通过
`.`
调用组件方法或设置属性
使用
`this.$refs`
获取组件并
as转换为组件对应的element类型,通过
`.`
操作符 调用组件方法或设置属性。
**语法**
```
(this.$refs['组件ref属性值'] as Uni[xxx]Element).foo();```
**类型规范**
**
内置组件的element
类型规范**
Uni`组件名(驼峰)`Element
...
...
@@ -228,23 +226,23 @@ Uni`组件名(驼峰)`Element
},
onReady() {
// value 为属性
(this.$refs["slider1"] as UniSliderElement).value = 10;
(this.$refs["slider1"] as UniSliderElement).value = 10;
//此处注意slider1必须存在,如不存在,把null as 成 UniSliderElement会引发崩溃
}
}
</script>
```
###
调用easycom组件
方法或设置属性@method_easycom
###
easycom组件调用
方法或设置属性@method_easycom
3.93+ 支持
>
3.93+ 支持
使用 `this.$refs` 获取组件并转换为组件的类型,通过 `.` 调用组件方法或设置属性
easycom组件,用法和内置组件一样。也是使用 `this.$refs` 获取组件并转换为组件的类型,通过 `.`操作符 调用组件方法或设置属性。
**语法**
```
(this.$refs['组件ref属性值'] as 驼峰ComponentPublicInstance).foo();
```
**类型规范**
**
easycom组件的
类型规范**
组件标签名首字母大写,驼峰+ComponentPublicInstance
...
...
@@ -253,16 +251,79 @@ Uni`组件名(驼峰)`Element
`<test/>` 类型为:TestComponentPublicInstance
`<uni-data-checkbox/>` 类型为:UniDataCheckboxComponentPublicInstance
**示例代码**
假使有一个component1组件,其有若干方法foo1等,如下。
```
html
<template>
<view></view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
foo1() {
console.log("foo1");
},
foo2(date1 : number) {
console.log(date1);
},
foo3(date1 : number, date2 : number) {
},
foo4(callback : (() => void)) {
callback()
},
foo5(text1 : string) : any | null {
return text1
}
}
}
</script>
```
component1组件符合[easycom规范](https://uniapp.dcloud.net.cn/component/#easycom)
那么在页面中调用component1组件的方法如下:
```
html
<template>
<view>
<component1
ref=
"component1"
></component1>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onReady() {
let c1 = (this.$refs["component1"] as Component1ComponentPublicInstance) //注意组件必须存在,注意类型首字母大写
c1.foo1();
c1.foo2(1);
}
}
</script>
```
### 其它自定义组件的方法调用使用callMethod@$callMethod
如果不是内置组件,也不是easycom组件,那么无法使用`.`操作符了。
### 调用其它vue组件方法@$callMethod
此时需使用 `this.$refs` 获取组件实例,然后通过 `$callMethod` 调用组件的方法。也就是把组件的方法名、参数,当做callMethod的参数来传递。此时也就没有`.`操作符那样的代码提示和校验了。
使用 `this.$refs` 获取组件实例,通过 `$callMethod` 调用组件方法
callMethod可用于所有自定义组件,包括easycom组件也可以使用,只不过easycom组件有更简单的用法。
**语法**
```
this.$refs['组件ref属性值'].$callMethod('方法名', ...args)
```
**
类型规范
**
**
组件类型
**
ComponentPublicInstance
...
...
@@ -280,7 +341,7 @@ ComponentPublicInstance
// 导入 vue 组件实例类型
import { ComponentPublicInstance } from 'vue'
//
引用组件 component1.uvue, 如果使用 easycom 可省略此步骤
//
非easycom组件需import引用组件 component1.uvue
import component1 from './component1.uvue'
export default {
...
...
docs/uni-app-x/component/list-view.md
浏览文件 @
ff9456d5
...
...
@@ -120,5 +120,4 @@ list-view和scroll-view都是滚动组件,list适用于长列表场景,其
### Bug & Tips@tips
-
暂不支持reverse,目前还不能开发im那样的倒序列表
-
list的下拉刷新样式暂不支持自定义 (3.93版本已修复 支持自定义样式)
-
多列瀑布流是另外的组件,后续会提供
docs/uni-app-x/component/text.md
浏览文件 @
ff9456d5
...
...
@@ -28,5 +28,4 @@ app-nvue中,text组件不能嵌套。
## Bug & Tips@tips
-
**bug**
:
`text`
嵌套
`text`
时,如果外层
`text`
内没有文本内容,内层
`text`
文本未渲染。
-
**bug**
: 通过插槽传入文本时,文本内容未渲染,预计
`v3.93`
修复。
-
**tip**
: app-uvue的selectable开启后,仅支持全部文字复制,不支持自由调整光标选择文字。如需自由选择文字,请使用
[
rich-text组件
](
rich-text.md
)
。
docs/uni-app-x/component/video.md
浏览文件 @
ff9456d5
...
...
@@ -20,7 +20,6 @@ ijkplayer库的功能较多,video组件并非完全封装。有需要的开发
### Bug & Tips@tips
-
暂不支持横屏全屏后放置子组件
-
在Android9以下设备兼容性不够完善,反复暂停/播放会引起崩溃
-
标准运行基座默认不包含intel x86 cpu的兼容so库,所以video组件在标准基座运行时无法在x86 cpu的设备上运行(常见于模拟器)。如需支持x86 cpu,请在manifest里配置
`abiFilters`
,打包或自定义基座后生效
[
详见
](
https://uniapp.dcloud.net.cn/uni-app-x/manifest.html#android
)
<!-- UTSCOMJSON.video.children -->
...
...
docs/uni-app-x/tutorial/codegap.md
浏览文件 @
ff9456d5
...
...
@@ -267,7 +267,7 @@ request({url: 'https://www.example.com/request'} as RequestOptions)
## 调用组件方法@methods
[
详见
](
uni-app-x/component/README.md#methods
)
js中refs拿到一个组件后,可以直接
`.`
出它的方法。但uts中只有easycom组件可以使用
`.`
操作符,非easycom组件需要使用callMethod()。
[
详见
](
uni-app-x/component/README.md#methods
)
## vue使用注意
...
...
docs/uni-app-x/vue/README.md
浏览文件 @
ff9456d5
...
...
@@ -80,8 +80,6 @@ uni-app x 新增了 [onLastPageBackPress](collocation/App.md#applifecycle) 和 [
暂不支持vue插件,比如pinia、vuex、i18n、router。简单的状态管理可以参考文档
[
全局变量和状态管理
](
uni-app-x/tutorial/store.md
)
。
还有一些支持差异,在左侧文档点开后搜索“uni-app x”可见。
## 选项式 API兼容性
### 状态选项
...
...
@@ -114,5 +112,3 @@ uni-app x 新增了 [onLastPageBackPress](collocation/App.md#applifecycle) 和 [
<!-- VUEJSON.render_function.compatibility -->
## Bug & Tips@tips
-
**bug**
:
[
methods 中的方法不支持递归调用
](
https://ask.dcloud.net.cn/question/179395
)
,预计
`v3.93`
修复。
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录