docs: add more component registration guide (#9319)

This commit is contained in:
neverland 2021-08-24 10:03:26 +08:00 committed by GitHub
parent b33ef265fe
commit 624d05f749
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 0 deletions

View File

@ -39,6 +39,34 @@ export default {
> For more information, please refer to [Vue.js - Component Registration](https://v3.vuejs.org/guide/component-registration.html#component-registration)。 > For more information, please refer to [Vue.js - Component Registration](https://v3.vuejs.org/guide/component-registration.html#component-registration)。
#### \<script setup\>
Vant components can be used directly in `<script setup>` without component registration.
```xml
<script setup>
import { Button } from 'vant';
</script>
<template>
<Button />
</template>
```
#### JSX/TSX
Vant components can be used directly in JSX and TSX without component registration.
```jsx
import { Button } from 'vant';
export default {
render() {
return <Button />;
},
};
```
## Browser adaptation ## Browser adaptation
### Viewport Units ### Viewport Units

View File

@ -45,6 +45,34 @@ export default {
> 对于组件注册更详细的介绍,请参考 [Vue 官方文档 - 组件注册](https://v3.cn.vuejs.org/guide/component-registration.html#%E7%BB%84%E4%BB%B6%E6%B3%A8%E5%86%8C)。 > 对于组件注册更详细的介绍,请参考 [Vue 官方文档 - 组件注册](https://v3.cn.vuejs.org/guide/component-registration.html#%E7%BB%84%E4%BB%B6%E6%B3%A8%E5%86%8C)。
#### \<script setup\>
`<script setup>` 中可以直接使用 Vant 组件,不需要进行组件注册。
```xml
<script setup>
import { Button } from 'vant';
</script>
<template>
<Button />
</template>
```
#### JSX/TSX
在 JSX 和 TSX 中可以直接使用 Vant 组件,不需要进行组件注册。
```jsx
import { Button } from 'vant';
export default {
render() {
return <Button />;
},
};
```
### 组件插槽 ### 组件插槽
Vant 提供了丰富的组件插槽,通过插槽可以对组件的某一部分进行个性化定制。如果你对 Vue 的插槽不太熟悉,可以阅读 Vue 官方文档中的[插槽章节](https://v3.cn.vuejs.org/guide/component-slots.html)。下面是通过插槽来定制 Checkbox 图标的示例: Vant 提供了丰富的组件插槽,通过插槽可以对组件的某一部分进行个性化定制。如果你对 Vue 的插槽不太熟悉,可以阅读 Vue 官方文档中的[插槽章节](https://v3.cn.vuejs.org/guide/component-slots.html)。下面是通过插槽来定制 Checkbox 图标的示例: