Skip to content

U
unidocs-uni-app-x-zh

DCloud / unidocs-uni-app-x-zh

通知 144
Star 2
Fork 33
U
unidocs-uni-app-x-zh
提交 cd559a59 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

docs(component): 补充组合式 API 代码示例

上级 26ab37e1
隐藏空白更改
内联 并排
Showing with 323 addition and 149 deletion
docs/component/README.md
浏览文件 @ cd559a59
...@@ -46,48 +46,95 @@ uni-app x支持的组件包括： ...@@ -46,48 +46,95 @@ uni-app x支持的组件包括：
- 复杂数据类型需要通过 `PropType` 标记类型，[详见](https://cn.vuejs.org/guide/typescript/options-api.html#typing-component-props)。 - 复杂数据类型需要通过 `PropType` 标记类型，[详见](https://cn.vuejs.org/guide/typescript/options-api.html#typing-component-props)。
- `type` 不支持使用自定义的构造函数。 - `type` 不支持使用自定义的构造函数。
::: preview
> 选项式 API
```ts ```ts
export default { <script lang="uts">
export default {
// 字符串数组方式声明，所有 prop 类型均为 any | null
props: ['num', 'str', 'obj', 'arr']
}
</script>
```
> 组合式 API
```ts
<script setup lang="uts">
// 字符串数组方式声明，所有 prop 类型均为 any | null // 字符串数组方式声明，所有 prop 类型均为 any | null
props: ['num', 'str', 'obj', 'arr'] const props = defineProps(['num', 'str', 'obj', 'arr'])
} </script>
``` ```
:::
::: preview
> 选项式 API
```ts ```ts
type Obj = { a: number } <script lang="uts">
type Obj = { a: number }
export default {
props: { export default {
num: { props: {
type: Number, num: {
required: true type: Number,
}, required: true
str: { },
type: String, str: {
default: 'str', type: String,
validator(value: string): boolean { default: 'str',
return value.length > 0 validator(value: string): boolean {
return value.length > 0
}
},
obj: {
type: UTSJSONObject as PropType<Obj>,
default: (): Obj => ({ a: 1 } as Obj)
},
arr: {
type: Array as PropType<number[]>,
default: (): number[] => [1, 2, 3]
} }
}, }
obj: { }
type: Object as PropType<Obj>, </script>
default: (): Obj => ({ a: 1 } as Obj)
},
arr: {
type: Array as PropType<number[]>,
default: (): number[] => [1, 2, 3]
}
}
}
``` ```
> 组合式 API
```ts
<script setup lang="uts">
type Obj = { a: number }
const props = defineProps({
num: {
type: Number,
required: true
},
str: {
type: String,
default: 'str',
validator(value : string) : boolean {
return value.length > 0
}
},
obj: {
type: UTSJSONObject as PropType<Obj>,
default: () : Obj => ({ a: 1 } as Obj)
},
arr: {
type: Array as PropType<number[]>,
default: () : number[] => [1, 2, 3]
}
})
</script>
```
:::
## 自定义组件 v-model 绑定复杂表达式 @v-model-complex-expression ## 自定义组件 v-model 绑定复杂表达式 @v-model-complex-expression
自定义组件 `v-model` 绑定复杂表达式时，需要通过 `as` 指定类型(仅App-Android 平台)。 自定义组件 `v-model` 绑定复杂表达式时，需要通过 `as` 指定类型(仅App-Android 平台)。
::: preview
> 选项式 API
```ts ```ts
<template> <template>
<my-input v-model="obj.str as string" /> <input v-model="obj.str as string" />
</template> </template>
<script lang="uts"> <script lang="uts">
...@@ -105,31 +152,87 @@ export default { ...@@ -105,31 +152,87 @@ export default {
} }
</script> </script>
``` ```
> 组合式 API
```ts
<template>
<input v-model="obj.str as string" />
</template>
<script setup lang="uts">
type Obj = {
str: string
}
const obj = reactive({
str: "str"
} as Obj)
</script>
```
:::
## 作用域插槽的类型 ## 作用域插槽的类型
作用域插槽需在组件中指定插槽数据类型 作用域插槽需在组件中指定插槽数据类型
::: preview
> 选项式 API
```ts ```ts
// components/Foo.uvue // components/Foo.uvue
<view> <template>
<slot msg="test msg" /> <slot msg="test msg" />
</view> </template>
import { SlotsType } from 'vue' <script lang="uts">
export default { import { SlotsType } from 'vue'
slots: Object as SlotsType<{
default: { msg: string } export default {
}> slots: Object as SlotsType<{
} default: { msg: string }
}>
}
</script>
// page.uvue
<template>
<Foo>
<template v-slot="{ msg }">
<text>{{ msg }}</text>
</template>
</Foo>
</template>
<script lang="uts">
import Foo from './Foo.uvue'
export default {
components: { Foo },
}
</script>
```
> 组合式 API
```ts
// components/Foo.uvue
<template>
<slot msg="test msg" />
</template>
<script setup lang="uts">
defineSlots<{
default(props: { msg: string }): null
}>()
</script>
// page.uvue // page.uvue
<view> <template>
<Foo> <Foo>
<template v-slot="slotProps"> <template v-slot="{ msg }">
<text>{{ slotProps.msg }}</text> <text>{{ msg }}</text>
</template> </template>
</Foo> </Foo>
</view> </template>
<script setup lang="uts">
import Foo from './Foo.uvue'
</script>
``` ```
:::
## ref ## ref
...@@ -142,14 +245,12 @@ export default { ...@@ -142,14 +245,12 @@ export default {
- 在 `uni-app x` 中，要访问 `$refs` 中的属性，需要使用索引方式。 - 在 `uni-app x` 中，要访问 `$refs` 中的属性，需要使用索引方式。
::: preview ::: preview
> uni-app js 引擎版 > uni-app js 引擎版
```ts ```ts
<template> <template>
<view> <view>
<text ref="text">text node</text> <text ref="textRef">text node</text>
<Foo ref="foo" /> <Foo ref="fooRef" />
</view> </view>
</template> </template>
...@@ -158,35 +259,49 @@ export default { ...@@ -158,35 +259,49 @@ export default {
export default { export default {
onReady() { onReady() {
const text = this.$refs.text as Element // 仅H5端支持 const text = this.$refs.textRef as Element // 仅H5端支持
const foo = this.$refs.foo as ComponentPublicInstance const foo = this.$refs.fooRef as ComponentPublicInstance
} }
} }
</script> </script>
``` ```
> uni-app x > uni-app x
```ts ```ts
// 选项式 API
<template> <template>
<view> <view>
<text ref="text">text node</text> <text ref="textRef">text node</text>
<Foo ref="foo" /> <Foo ref="fooRef" />
</view> </view>
</template> </template>
<script lang="uts"> <script lang="uts">
import type { ComponentPublicInstance } from 'vue' import type { ComponentPublicInstance } from 'vue'
export default { export default {
onReady() { onReady() {
const text = this.$refs["text"] as Element const text = this.$refs["textRef"] as Element
const foo = this.$refs["foo"] as ComponentPublicInstance const foo = this.$refs["fooRef"] as ComponentPublicInstance
} }
} }
</script> </script>
```
// 组合式 API
<template>
<view>
<text ref="textRef">text node</text>
<Foo ref="fooRef" />
</view>
</template>
<script setup lang="uts">
import type { ComponentPublicInstance } from 'vue'
import Foo from './Foo.uvue'
const textRef = ref<null | Element>(null)
const fooRef = ref<null | ComponentPublicInstance>(null)
</script>
```
::: :::
## 监听页面生命周期 ## 监听页面生命周期
...@@ -219,26 +334,38 @@ Uni`组件名(驼峰)`Element ...@@ -219,26 +334,38 @@ Uni`组件名(驼峰)`Element
**示例代码** **示例代码**
::: preview
> 选项式 API
```html ```html
<template> <template>
<view> <slider ref="sliderRef" />
<slider ref="slider1"></slider>
</view>
</template> </template>
<script> <script lang="uts">
export default { export default {
data() {
return {
}
},
onReady() { onReady() {
// value 为属性 // value 为属性
(this.$refs["slider1"] as UniSliderElement).value = 10; //此处注意slider1必须存在，如不存在，把null as 成 UniSliderElement会引发崩溃 (this.$refs["sliderRef"] as UniSliderElement).value = 90;
//此处注意 sliderRef 必须存在，如不存在，把 null as 成 UniSliderElement 会引发崩溃
} }
} }
</script> </script>
``` ```
> 组合式 API
```html
<template>
<slider ref="sliderRef" />
</template>
<script setup lang="uts">
const sliderRef = ref<null | UniSliderElement>(null)
onReady(() => {
(sliderRef.value!).value = 90
})
</script>
```
:::
**bug&tips** **bug&tips**
...@@ -265,63 +392,89 @@ easycom组件，用法和内置组件一样。也是使用 `this.$refs` 获取 ...@@ -265,63 +392,89 @@ easycom组件，用法和内置组件一样。也是使用 `this.$refs` 获取
**示例代码** **示例代码**
假使有一个component1组件，其有若干方法foo1等，如下。 假使有一个 `Foo` 组件，其有若干方法 `foo1` 等，如下。
::: preview
> 选项式 API
```html ```html
<template> <script lang="uts">
<view></view>
</template>
<script>
export default { export default {
data() {
return {
}
},
methods: { methods: {
foo1() { foo1() {
console.log("foo1"); console.log("foo1 triggered");
},
foo2(date1 : number) {
console.log(date1);
}, },
foo3(date1 : number, date2 : number) { foo2(num : number) {
console.log('foo2 triggered by num:', num);
}, },
foo4(callback : (() => void)) { foo3(callback : (() => void)) {
callback() callback()
},
foo5(text1 : string) : any | null {
return text1
} }
} }
} }
</script> </script>
``` ```
> 组合式 API
```html
<script setup lang="uts">
const foo1 = () => {
console.log("foo1 triggered");
}
const foo2 = (num : number) => {
console.log('foo2 triggered by num:', num);
}
const foo3 = (callback : (() => void)) => {
callback()
}
defineExpose({
foo1,
foo2,
foo3,
})
</script>
```
:::
component1组件符合[easycom规范](https://uniapp.dcloud.net.cn/component/#easycom) `Foo` 组件符合[easycom规范](https://uniapp.dcloud.net.cn/component/#easycom)
那么在页面中调用component1组件的方法如下： 那么在页面中调用 `Foo` 组件的方法如下：
::: preview
> 选项式 API
```html ```html
<template> <template>
<view> <Foo ref="fooRef" />
<component1 ref="component1"></component1>
</view>
</template> </template>
<script> <script lang="uts">
export default { export default {
data() {
return {
}
},
onReady() { onReady() {
let c1 = (this.$refs["component1"] as Component1ComponentPublicInstance) //注意组件必须存在，注意类型首字母大写 //注意组件必须存在，注意类型首字母大写
c1.foo1(); const fooRef = (this.$refs["fooRef"] as FooComponentPublicInstance)
c1.foo2(1); fooRef.foo1();
fooRef.foo2(100);
fooRef.foo3(() => {console.log('foo3 triggered')});
} }
} }
</script> </script>
``` ```
> 组合式 API
```html
<template>
<Foo ref='fooRef' />
</template>
<script setup lang="uts">
const fooRef = ref<null | FooComponentPublicInstance>(null)
onReady(() => {
(fooRef.value!).foo1();
(fooRef.value!).foo2(100);
(fooRef.value!).foo3(() => {console.log('foo3 triggered')});
})
</script>
```
:::
### 其它自定义组件的方法调用使用callMethod@$callMethod ### 其它自定义组件的方法调用使用callMethod@$callMethod
...@@ -340,84 +493,105 @@ callMethod可用于所有自定义组件，包括easycom组件也可以使用， ...@@ -340,84 +493,105 @@ callMethod可用于所有自定义组件，包括easycom组件也可以使用，
ComponentPublicInstance ComponentPublicInstance
页面示例代码 `page1.uvue` 页面示例代码 `page.uvue`
::: preview
> 选项式 API
```html ```html
<template> <template>
<view> <Foo ref="fooRef" />
<component1 ref="component1"></component1>
</view>
</template> </template>
<script> <script lang="uts">
// 非easycom组件需import引用组件 component1.uvue import Foo from './Foo.uvue'
import component1 from './component1.uvue'
export default { export default {
components: { components: {
component1 Foo
},
data() {
return {
}
}, },
onReady() { onReady() {
// 通过组件 ref 属性获取组件实例 const fooRef = this.$refs['fooRef'] as ComponentPublicInstance
const component1 = this.$refs['component1'] as ComponentPublicInstance;
// 通过 $callMethod 调用组件的 foo1 方法
component1.$callMethod('foo1');
// 通过 $callMethod 调用组件的 foo2 方法并传递 1个参数
component1.$callMethod('foo2', Date.now());
// 通过 $callMethod 调用组件的 foo3 方法并传递 2个参数 fooRef.$callMethod('foo1')
component1.$callMethod('foo3', Date.now(), Date.now());
// 通过 $callMethod 调用组件的 foo4 方法并传递 callback const res = fooRef.$callMethod('foo2', 100, 10)
component1.$callMethod('foo4', () => { console.log('res of foo2', res)
console.log('callback')
});
// 通过 $callMethod 调用组件的 foo5 方法并接收返回值 fooRef.$callMethod('foo3', () => {
// 注意： 返回值可能为 null，当前例子一定不为空，所以加了 ! console.log('foo3 triggered')
const result = component1.$callMethod('foo5', 'string1')! as string; })
console.log(result); // string1
} }
} }
</script> </script>
``` ```
> 组合式 API
组件示例代码 `component1.uvue`
```html ```html
<template> <template>
<view></view> <Foo ref="fooRef" />
</template> </template>
<script> <script setup lang="uts">
import Foo from './Foo.uvue'
const fooRef = ref<null | ComponentPublicInstance>(null)
onReady(() => {
(fooRef.value!).$callMethod('foo1')
const res = (fooRef.value!).$callMethod('foo2', 100, 10)
console.log('res of foo2', res);
(fooRef.value!).$callMethod('foo3', () => {
console.log('foo3 triggered')
})
})
</script>
```
:::
组件示例代码 `Foo.uvue`
::: preview
> 选项式 API
```html
<script lang="uts">
export default { export default {
data() {
return {
}
},
methods: { methods: {
foo1() { foo1() {
console.log("foo1 triggered");
}, },
foo2(date1 : number) { foo2(num1 : number, num2: number){
}, console.log(`foo2 triggered by num1: ${num1}, num2: ${num2}`)
foo3(date1 : number, date2 : number) { return num1 + num2
}, },
foo4(callback : (() => void)) { foo3(callback : (() => void)) {
callback() callback()
},
foo5(text1 : string) : any | null {
return text1
} }
} }
} }
</script> </script>
``` ```
> 组合式 API
```html
<script setup lang="uts">
const foo1 = () => {
console.log("foo1 triggered");
}
const foo2 = (num1 : number, num2: number): number => {
console.log(`foo2 triggered by num1: ${num1}, num2: ${num2}`)
return num1 + num2
}
const foo3 = (callback : (() => void)) => {
callback()
}
defineExpose({
foo1,
foo2,
foo3,
})
</script>
```
:::
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或