提交 3cc297c6 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

docs(vue3): component uni-app x compatibility

上级 681859cf
......@@ -210,7 +210,7 @@
##### 示例:
> uni-app js 引擎版
```html
<template>
<view>
......@@ -234,6 +234,30 @@
}
</script>
```
> uni-app x
```html
<template>
<view>
<!-- 我是子组件componentA -->
<view>{{age}}</view>
</view>
</template>
<script>
export default {
props: {
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function(value): boolean {
return value >= 0
}
}
}
}
</script>
```
```html
<template>
......@@ -361,7 +385,7 @@
1. **这个 `prop` 用来传递一个初始值**;这个子组件接下来希望将其作为一个本地的 `prop` 数据来使用。在这种情况下,最好定义一个本地的 `data property `并将这个 `prop` 作为其初始值:
> uni-app js 引擎版
```html
<template>
<view>
......@@ -380,6 +404,29 @@
}
</script>
```
> uni-app x
```html
<template>
<view>
<!-- 我是子组件componentA -->
<view>{{myTitle}}</view>
</view>
</template>
<script>
export default {
props: {
title: {
type: String
}
},
data() {
return {
myTitle:this.title as string
}
}
}
</script>
```
```html
<template>
......@@ -403,7 +450,7 @@
2. **这个 `prop` 以一种原始的值传入且需要进行转换**。在这种情况下,最好使用这个 `prop` 的值来定义一个计算属性:
> uni-app js 引擎版
```html
<template>
<view>
......@@ -422,6 +469,29 @@
}
</script>
```
> uni-app x
```html
<template>
<view>
<!-- 我是子组件componentA -->
<view>{{normalizedSize}}</view>
</view>
</template>
<script>
export default {
props: {
size: {
type: String
}
},
computed: {
normalizedSize: function (): string {
return this.size.toLowerCase()
}
}
}
</script>
```
```html
<template>
......@@ -454,7 +524,7 @@
为了定制 `prop` 的验证方式,你可以为 `props` 中的值提供一个带有验证需求的对象,而不是一个字符串数组。例如:
> uni-app js 引擎版
```js
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
......@@ -496,6 +566,47 @@
}
}
```
> uni-app x
```js
props: {
propA: {
type: Number
},
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: UTSObject,
// 对象或数组默认值必须从一个工厂函数获取
default: function(): UTSObject {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function(value): boolean {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
},
// 具有默认值的函数
propG: {
type: Function,
// 与对象或数组默认值不同,这不是一个工厂函数 —— 这是一个用作默认值的函数
default: function(): string {
return 'Default function'
}
}
}
```
`prop` 验证失败的时候,(开发环境构建版本的) `Vue` 将会产生一个控制台的警告。
......@@ -537,12 +648,14 @@
用于验证 `author` prop 的值是否是通过 `new Person` 创建的。
**注意:uni-app x 暂不支持**
### Prop 的大小写命名
`HTML` 中的 `attribute` 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 `DOM` 中的模板时,`camelCase` (驼峰命名法) 的 `prop` 名需要使用其等价的 `kebab-case` (短横线分隔命名) 命名:
> uni-app js 引擎版
```html
<template>
<view>
......@@ -557,6 +670,25 @@
}
</script>
```
> uni-app x
```html
<template>
<view>
<!-- 我是子组件componentA -->
<view>{{postTitle}}</view>
</view>
</template>
<script>
export default {
props: {
postTitle: {
type: String
}
}
}
</script>
```
```html
<template>
......@@ -844,9 +976,7 @@
}
```
**注意:uni-app x 暂不支持**
### v-model 参数
......@@ -1001,7 +1131,7 @@
</script>
```
**注意:uni-app x 暂不支持 capitalize 修饰符**
```html
<!-- 我是 my-component子组件-->
......@@ -1038,10 +1168,8 @@
</script>
```
对于带参数的 `v-model` 绑定,生成的 `prop` 名称将为 `arg + "Modifiers"`
```html
<my-component v-model:foo.capitalize="bar"></my-component>
```
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册