Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
enjoyphenix
unidocs-zh
提交
502ffbdb
unidocs-zh
项目概览
enjoyphenix
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
502ffbdb
编写于
10月 18, 2023
作者:
H
hdx
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
component: 迁移调用组件方法
上级
c53f4387
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
164 addition
and
141 deletion
+164
-141
docs/uni-app-x/component/README.md
docs/uni-app-x/component/README.md
+163
-0
docs/uni-app-x/tutorial/codegap.md
docs/uni-app-x/tutorial/codegap.md
+1
-141
未找到文件。
docs/uni-app-x/component/README.md
浏览文件 @
502ffbdb
...
...
@@ -188,6 +188,169 @@ export default {
-
在
`uni-app`
中,只支持使用
`vue`
组件。
## 调用组件方法@methods
通过以下3中方法调用组件内部方法或属性
### 调用内置组件方法或设置属性
3.
93+ 支持
使用
`this.$refs`
获取组件并转换为组件的类型,通过
`.`
调用组件方法或设置属性
**语法**
```
(this.$refs['组件ref属性值'] as Uni[xxx]Element).foo();```
**类型规范**
Uni`组件名(驼峰)`Element
如:
`<button>`: UniButtonElement
`<picker-view>`: UniPickerViewElement
**示例代码**
```
html
<template>
<view>
<slider
ref=
"slider1"
></slider>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onReady() {
// value 为属性
(this.$refs["slider1"] as UniSliderElement).value = 10;
}
}
</script>
```
### 调用easycom组件方法或设置属性@method_easycom
3.93+ 支持
使用 `this.$refs` 获取组件并转换为组件的类型,通过 `.` 调用组件方法或设置属性
**语法**
```
(this.$refs['组件ref属性值'] as 驼峰ComponentPublicInstance).foo();
```
**类型规范**
组件标签名首字母大写,驼峰+ComponentPublicInstance
如:
`<test/>` 类型为:TestComponentPublicInstance
`<uni-data-checkbox/>` 类型为:UniDataCheckboxComponentPublicInstance
### 调用其它vue组件方法@$callMethod
使用 `this.$refs` 获取组件实例,通过 `$callMethod` 调用组件方法
**语法**
```
this.$refs['组件ref属性值'].$callMethod('方法名', ...args)
```
**类型规范**
ComponentPublicInstance
页面示例代码 `page1.uvue`
```
html
<template>
<view>
<component1
ref=
"component1"
></component1>
</view>
</template>
<script>
// 导入 vue 组件实例类型
import { ComponentPublicInstance } from 'vue'
// 引用组件 component1.uvue, 如果使用 easycom 可省略此步骤
import component1 from './component1.uvue'
export default {
components: {
component1
},
data() {
return {
}
},
onReady() {
// 通过组件 ref 属性获取组件实例
const component1 = this.$refs['component1'] as ComponentPublicInstance;
// 通过 $callMethod 调用组件的 foo1 方法
component1.$callMethod('foo1');
// 通过 $callMethod 调用组件的 foo2 方法并传递 1个参数
component1.$callMethod('foo2', Date.now());
// 通过 $callMethod 调用组件的 foo3 方法并传递 2个参数
component1.$callMethod('foo3', Date.now(), Date.now());
// 通过 $callMethod 调用组件的 foo4 方法并传递 callback
component1.$callMethod('foo4', () => {
console.log('callback')
});
// 通过 $callMethod 调用组件的 foo5 方法并接收返回值
// 注意: 返回值可能为 null,当前例子一定不为空,所以加了 !
const result = component1.$callMethod('foo5', 'string1')! as string;
console.log(result); // string1
}
}
</script>
```
组件示例代码 `component1.uvue`
```
html
<template>
<view></view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
foo1() {
},
foo2(date1 : number) {
},
foo3(date1 : number, date2 : number) {
},
foo4(callback : (() => void)) {
callback()
},
foo5(text1 : string) : any | null {
return text1
}
}
}
</script>
```
## 如何开发同时兼容 uni-app x 和 uni-app 的组件
目前有两种方案:
...
...
docs/uni-app-x/tutorial/codegap.md
浏览文件 @
502ffbdb
...
...
@@ -267,147 +267,7 @@ request({url: 'https://www.example.com/request'} as RequestOptions)
## 调用组件方法@methods
### 调用内置组件方法或设置属性
使用
`this.$refs`
获取组件并转换为组件的类型,通过
`.`
调用组件方法或设置属性
**语法**
```
(this.$refs['组件ref属性值'] as Uni[xxx]Element).foo();```
**类型规范**
Uni`组件名(驼峰)`Element
如:
`<button>`: UniButtonElement
`<picker-view>`: UniPickerViewElement
**示例代码**
```
html
<template>
<view>
<slider
ref=
"slider1"
></slider>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onReady() {
// value 为属性
(this.$refs["slider1"] as UniSliderElement).value = 10;
}
}
</script>
```
### 调用vue组件方法@$callMethod
使用 `this.$refs` 获取组件实例,通过 `$callMethod` 调用组件方法
**语法**
```
this.$refs['组件ref属性值'].$callMethod('方法名', ...args)
```
**类型规范**
1.easycom自定义组件类型名称规范:组件标签名首字母大写,驼峰+ComponentPublicInstance
如:
`<test/>` 类型为:TestComponentPublicInstance
`<uni-data-checkbox/>` 类型为:UniDataCheckboxComponentPublicInstance
2. 其他自定义组件实例类型: `ComponentPublicInstance`
页面示例代码 `page1.uvue`
```
html
<template>
<view>
<component1
ref=
"component1"
></component1>
</view>
</template>
<script>
// 导入 vue 组件实例类型
import { ComponentPublicInstance } from 'vue'
// 引用组件 component1.uvue, 如果使用 easycom 可省略此步骤
import component1 from './component1.uvue'
export default {
components: {
component1
},
data() {
return {
}
},
onReady() {
// 通过组件 ref 属性获取组件实例
const component1 = this.$refs['component1'] as ComponentPublicInstance;
// 通过 $callMethod 调用组件的 foo1 方法
component1.$callMethod('foo1');
// 通过 $callMethod 调用组件的 foo2 方法并传递 1个参数
component1.$callMethod('foo2', Date.now());
// 通过 $callMethod 调用组件的 foo3 方法并传递 2个参数
component1.$callMethod('foo3', Date.now(), Date.now());
// 通过 $callMethod 调用组件的 foo4 方法并传递 callback
component1.$callMethod('foo4', () => {
console.log('callback')
});
// 通过 $callMethod 调用组件的 foo5 方法并接收返回值
// 注意: 返回值可能为 null,当前例子一定不为空,所以加了 !
const result = component1.$callMethod('foo5', 'string1')! as string;
console.log(result); // string1
}
}
</script>
```
组件示例代码 `component1.uvue`
```
html
<template>
<view></view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
foo1() {
},
foo2(date1 : number) {
},
foo3(date1 : number, date2 : number) {
},
foo4(callback : (() => void)) {
callback()
},
foo5(text1 : string) : any | null {
return text1
}
}
}
</script>
```
[
详见
](
uni-app-x/component//README.md#methods
)
## vue使用注意
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录