提交 37abc25f 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

docs(vue3 component): 移除 uni-app x 代码示例

上级 5cce32fa
......@@ -211,10 +211,6 @@
##### 示例:
::: preview
> uni-app js 引擎版
```html
<template>
<view>
......@@ -239,34 +235,6 @@
</script>
```
> uni-app x
```html
<template>
<view>
<!-- 我是子组件componentA -->
<view>{{age}}</view>
</view>
</template>
<script lang="uts">
export default {
props: {
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function(value: number): boolean {
return value >= 0
}
}
}
}
</script>
```
:::
```html
<template>
<view>
......@@ -389,10 +357,6 @@
1. **这个 `prop` 用来传递一个初始值**;这个子组件接下来希望将其作为一个本地的 `prop` 数据来使用。在这种情况下,最好定义一个本地的 `data property `并将这个 `prop` 作为其初始值:
::: preview
> uni-app js 引擎版
```html
<template>
<view>
......@@ -412,33 +376,6 @@
</script>
```
> uni-app x
```html
<template>
<view>
<!-- 我是子组件componentA -->
<view>{{myTitle}}</view>
</view>
</template>
<script lang="uts">
export default {
props: {
title: {
type: String
}
},
data() {
return {
myTitle:this.title as string
}
}
}
</script>
```
:::
```html
<template>
<view>
......@@ -461,10 +398,6 @@
2. **这个 `prop` 以一种原始的值传入且需要进行转换**。在这种情况下,最好使用这个 `prop` 的值来定义一个计算属性:
::: preview
> uni-app js 引擎版
```html
<template>
<view>
......@@ -484,33 +417,6 @@
</script>
```
> uni-app x
```html
<template>
<view>
<!-- 我是子组件componentA -->
<view>{{normalizedSize}}</view>
</view>
</template>
<script lang="uts">
export default {
props: {
size: {
type: String
}
},
computed: {
normalizedSize: function (): string {
return this.size.toLowerCase()
}
}
}
</script>
```
:::
```html
<template>
<view>
......@@ -542,10 +448,6 @@
为了定制 `prop` 的验证方式,你可以为 `props` 中的值提供一个带有验证需求的对象,而不是一个字符串数组。例如:
::: preview
> uni-app js 引擎版
```js
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
......@@ -588,52 +490,6 @@
}
```
> uni-app x
```js
props: {
propA: {
type: Number
},
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function(): Object {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
type: String,
validator: function(value: string): boolean {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) != -1
}
},
// 具有默认值的函数
propG: {
type: Function,
// 与对象或数组默认值不同,这不是一个工厂函数 —— 这是一个用作默认值的函数
default: function(): string {
return 'Default function'
}
}
}
```
:::
`prop` 验证失败的时候,(开发环境构建版本的) `Vue` 将会产生一个控制台的警告。
**tips**
......@@ -679,10 +535,6 @@
`HTML` 中的 `attribute` 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 `DOM` 中的模板时,`camelCase` (驼峰命名法) 的 `prop` 名需要使用其等价的 `kebab-case` (短横线分隔命名) 命名:
::: preview
> uni-app js 引擎版
```html
<template>
<view>
......@@ -698,29 +550,6 @@
</script>
```
> uni-app x
```html
<template>
<view>
<!-- 我是子组件componentA -->
<view>{{postTitle}}</view>
</view>
</template>
<script lang="uts">
export default {
props: {
postTitle: {
type: String
}
}
}
</script>
```
:::
```html
<template>
<view>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册