提交 ff9456d5 编写于 作者: W wanganxp

x

上级 3e9a0d43
......@@ -172,14 +172,12 @@ export default {
## vue 与 uvue 不同文件后缀的优先级 @priority
新建组件时,默认组件的后缀名为.vue。而不是.uvue。
新建组件时,默认组件的后缀名为.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 {
......
......@@ -120,5 +120,4 @@ list-view和scroll-view都是滚动组件,list适用于长列表场景,其
### Bug & Tips@tips
- 暂不支持reverse,目前还不能开发im那样的倒序列表
- list的下拉刷新样式暂不支持自定义 (3.93版本已修复 支持自定义样式)
- 多列瀑布流是另外的组件,后续会提供
......@@ -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)
......@@ -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 -->
......
......@@ -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使用注意
......
......@@ -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.
先完成此消息的编辑!
想要评论请 注册