diff --git a/docs/uni-app-x/component/README.md b/docs/uni-app-x/component/README.md new file mode 100644 index 0000000000000000000000000000000000000000..a4b0d416733a614e78761e0aaf91cd714beb9091 --- /dev/null +++ b/docs/uni-app-x/component/README.md @@ -0,0 +1,78 @@ +# 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 + + + + +import { SlotsType } from 'vue' +export default { + slots: Object as SlotsType<{ + default: { msg: string } + }> +} +// page.uvue + + + + + +``` + +## 监听页面生命周期 + +目前暂不支持在组件内监听页面生命周期,待后续支持组合式 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` 组件。 diff --git a/docs/uni-app-x/tutorial/codegap.md b/docs/uni-app-x/tutorial/codegap.md index 10cacd10600dff5d94995a26bddfdf1340b8d571..86e734047ab624bd1c5fb2d27644b8b781fe517f 100644 --- a/docs/uni-app-x/tutorial/codegap.md +++ b/docs/uni-app-x/tutorial/codegap.md @@ -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使用注意 diff --git a/docs/uni-app-x/vue/readme.md b/docs/uni-app-x/vue/README.md similarity index 100% rename from docs/uni-app-x/vue/readme.md rename to docs/uni-app-x/vue/README.md diff --git a/docs/worktile/auto/api.md b/docs/worktile/auto/api.md index 9d3bbac83f0dfc6f9662b00f07f29e69b950cbc2..781c6f80d7d08796ba3646a4515f370590d09fd2 100644 --- a/docs/worktile/auto/api.md +++ b/docs/worktile/auto/api.md @@ -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 |√ |手指开始触摸元素 |