提交 28d5597c 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

docs: uni-app x compatibility

上级 adba9933
# uvue组件概述
uni-app x支持vue组件,不支持小程序wxml组件。
支持[easycom](/component/README.md#easycom)
uvue的组件,可以使用前端技术编写,也可以使用原生技术编写。
- 前端技术即新建一个vue或uvue文件,按vue组件规范编写代码。
- 原生的uts组件插件,指把原生的、需要在界面上显示的组件,编写uts代码,通过uni_modules插件的方式集成到uni-app项目中。比如
* lottie组件,使用uts调用原生的lottie sdk来开发组件,再引入页面中。[详见](https://ext.dcloud.net.cn/plugin?name=uni-animation-view)
* video组件,其实官方的video,也是用uts组件插件实现的
之所以称之为`uts组件插件`,是相对于另一个分类`uts api插件`
uts组件插件的开发教程,[详见](/plugin/uts-component.md)
**兼容性及注意事项:**
## props
- 仅支持[对象方式](https://cn.vuejs.org/guide/components/props.html#props-declaration)声明。
- 暂不支持[自定义类型校验函数](https://cn.vuejs.org/guide/components/props.html#prop-validation)
## 自定义事件
- [v-model](tutorial/vue3-components.html#v-model-modifiers) 暂不支持 `capitalize` 修饰符。
## 计算属性和侦听器
- [watch deep](https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#%E9%80%89%E9%A1%B9-deep) 不支持
- [监听对象中单个属性](https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#%E7%9B%91%E5%90%AC%E5%AF%B9%E8%B1%A1%E4%B8%AD%E5%8D%95%E4%B8%AA%E5%B1%9E%E6%80%A7) 不支持
## 作用域插槽的类型
作用域插槽需在组件中指定插槽数据类型
```ts
// components/Foo.uvue
<view>
<slot msg="test msg" />
</view>
import { SlotsType } from 'vue'
export default {
slots: Object as SlotsType<{
default: { msg: string }
}>
}
// page.uvue
<view>
<Foo>
<template v-slot="slotProps">
<text>{{ slotProps.msg }}</text>
</template>
</Foo>
</view>
```
## 监听页面生命周期
目前暂不支持在组件内监听页面生命周期,待后续支持组合式 API 后,可通过组合式 API 实现。
## vue 与 uvue 不同文件后缀的优先级 @priority
新建组件时,默认组件的后缀名为.vue。而不是.uvue。
.vue里面写uvue的语法,可以正常被.uvue页面引用和编译。
.vue里写条件编译,可以制作同时满足uni-app和uni-app x的组件。
但是uni-app x也支持.uvue文件的组件。
当你手动import或easycom手动配置规则,可以指定文件名后缀。比如`import PageHead from '@/components/page-head.uvue'`
但如果未明确指定组件后缀名的情况,且同一个组件目录下即存在.vue文件、又存在.uvue文件,
此时 `vue` 组件和 `uvue` 组件的优先级如下:
-`uni-app x` 中,优先使用 `uvue` 组件,如果不存在 `uvue` 组件,则使用 `vue` 组件。
-`uni-app` 中,只支持使用 `vue` 组件。
......@@ -226,7 +226,7 @@ request({url: 'https://www.example.com/request'} as RequestOptions)
## vue 注意事项
[详见](https://uniapp.dcloud.net.cn/uni-app-x/vue/)
[详见](uni-app-x/vue/README.md)
## css使用注意
......
......@@ -1190,7 +1190,7 @@ video 组件必须设置了 id 才能使用。
|callMethod |√ |√ |√ |√ |√ |√ |调用组件实例指定方法,仅自定义组件可以使用,uni-app x args 仅支持一个参数|
|html |√ |√ |√ |√ |√ |x |获取元素 HTML |
|outerHtml |√ |√ |√ |√ |√ |x |同 html,只是会获取到元素本身 |
|data |√ |√ |√ |√ |√ |√ |获取组件实例渲染数据,仅自定义组件可以使用,uni-app x 暂不支持 path|
|data |√ |√ |√ |√ |√ |√ |获取组件实例渲染数据,仅自定义组件可以使用|
|setData |√ |√ |√ |√ |√ |√ |设置组件实例渲染数据,仅自定义组件可以使用 |
|property |√ |√ |√ |√ |x |√ |获取元素属性 |
|touchstart |√ |√ |√ |√ |x |√ |手指开始触摸元素 |
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册