提交 79b911f8 编写于 作者: D DCloud_LXH

feat(vue): 优先展示组合式 API

上级 abd5db44
...@@ -18,15 +18,15 @@ ...@@ -18,15 +18,15 @@
为了方便阅读,当子节点不是插槽对象时,可以省略 prop 参数。 为了方便阅读,当子节点不是插槽对象时,可以省略 prop 参数。
- 示例 [详情](<!-- VUEJSON.E_render-function.render_render-options.gitUrl -->) - 示例 [详情](<!-- VUEJSON.E_render-function.render_render-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_render-function.render_render-options.webUrl --> ::: preview <!-- VUEJSON.E_render-function.render_render-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_render-function.render_render-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_render-function.render_render-composition.code --> <!-- VUEJSON.E_render-function.render_render-composition.code -->
> 选项式 API
<!-- VUEJSON.E_render-function.render_render-options.code -->
::: :::
#### mergeProps() #### mergeProps()
...@@ -42,15 +42,15 @@ ...@@ -42,15 +42,15 @@
- onXxx 事件监听器——多个同名的事件监听器将被合并到一个数组。 - onXxx 事件监听器——多个同名的事件监听器将被合并到一个数组。
如果你不需要合并行为而是简单覆盖,可以使用原生 object spread 语法来代替。 如果你不需要合并行为而是简单覆盖,可以使用原生 object spread 语法来代替。
- 示例 [详情](<!-- VUEJSON.E_render-function.mergeProps_mergeProps-options.gitUrl -->) - 示例 [详情](<!-- VUEJSON.E_render-function.mergeProps_mergeProps-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_render-function.mergeProps_mergeProps-options.webUrl -->
> 选项式 API ::: preview <!-- VUEJSON.E_render-function.mergeProps_mergeProps-composition.webUrl -->
<!-- VUEJSON.E_render-function.mergeProps_mergeProps-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_render-function.mergeProps_mergeProps-composition.code --> <!-- VUEJSON.E_render-function.mergeProps_mergeProps-composition.code -->
> 选项式 API
<!-- VUEJSON.E_render-function.mergeProps_mergeProps-options.code -->
::: :::
#### cloneVNode() #### cloneVNode()
...@@ -65,30 +65,30 @@ ...@@ -65,30 +65,30 @@
Vnode 具有特殊的内部属性,因此克隆它并不像 object spread 一样简单。cloneVNode() 处理了大部分这样的内部逻辑。 Vnode 具有特殊的内部属性,因此克隆它并不像 object spread 一样简单。cloneVNode() 处理了大部分这样的内部逻辑。
- 示例 [详情](<!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-options.gitUrl -->) - 示例 [详情](<!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-options.webUrl --> ::: preview <!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-composition.code --> <!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-composition.code -->
> 选项式 API
<!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-options.code -->
::: :::
#### isVNode() #### isVNode()
判断一个值是否为 vnode 类型。 判断一个值是否为 vnode 类型。
- 示例 [详情](<!-- VUEJSON.E_render-function.isVNode_isVNode-options.gitUrl -->) - 示例 [详情](<!-- VUEJSON.E_render-function.isVNode_isVNode-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_render-function.isVNode_isVNode-options.webUrl --> ::: preview <!-- VUEJSON.E_render-function.isVNode_isVNode-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_render-function.isVNode_isVNode-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_render-function.isVNode_isVNode-composition.code --> <!-- VUEJSON.E_render-function.isVNode_isVNode-composition.code -->
> 选项式 API
<!-- VUEJSON.E_render-function.isVNode_isVNode-options.code -->
::: :::
#### resolveComponent() #### resolveComponent()
...@@ -103,15 +103,15 @@ ...@@ -103,15 +103,15 @@
如果组件未找到,会抛出一个运行时警告,并返回组件名字符串。 如果组件未找到,会抛出一个运行时警告,并返回组件名字符串。
- 示例 [详情](<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-options.gitUrl -->) - 示例 [详情](<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-options.webUrl -->
> 选项式 API ::: preview <!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-composition.webUrl -->
<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-composition.code --> <!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-composition.code -->
> 选项式 API
<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-options.code -->
::: :::
#### withDirectives() #### withDirectives()
...@@ -122,15 +122,15 @@ ...@@ -122,15 +122,15 @@
用自定义指令包装一个现有的 vnode。第二个参数是自定义指令数组。每个自定义指令也可以表示为 `[Directive, value, argument, modifiers]` 形式的数组。如果不需要,可以省略数组的尾元素。 用自定义指令包装一个现有的 vnode。第二个参数是自定义指令数组。每个自定义指令也可以表示为 `[Directive, value, argument, modifiers]` 形式的数组。如果不需要,可以省略数组的尾元素。
- 示例 [详情](<!-- VUEJSON.E_render-function.withDirectives_withDirectives-options.gitUrl -->) - 示例 [详情](<!-- VUEJSON.E_render-function.withDirectives_withDirectives-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_render-function.withDirectives_withDirectives-options.webUrl --> ::: preview <!-- VUEJSON.E_render-function.withDirectives_withDirectives-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_render-function.withDirectives_withDirectives-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_render-function.withDirectives_withDirectives-composition.code --> <!-- VUEJSON.E_render-function.withDirectives_withDirectives-composition.code -->
> 选项式 API
<!-- VUEJSON.E_render-function.withDirectives_withDirectives-options.code -->
::: :::
#### withModifiers() #### withModifiers()
......
...@@ -13,18 +13,18 @@ ...@@ -13,18 +13,18 @@
v-text 将覆盖元素中所有现有的内容。 v-text 将覆盖元素中所有现有的内容。
示例 [详情](<!-- VUEJSON.E_directive.v-text_v-text-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_directive.v-text_v-text-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-text_v-text-options.webUrl --> ::: preview <!-- VUEJSON.E_directive.v-text_v-text-composition.webUrl -->
>选项式 API
<!-- VUEJSON.E_directive.v-text_v-text-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_directive.v-text_v-text-composition.code --> <!-- VUEJSON.E_directive.v-text_v-text-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-text_v-text-options.code -->
::: :::
### v-html ### v-html
...@@ -37,18 +37,18 @@ ...@@ -37,18 +37,18 @@
绑定 `v-html` 的标签内的内容会被忽略,`v-html` 指令的内容会编译为 `rich-text` 组件渲染为该标签的子节点。 绑定 `v-html` 的标签内的内容会被忽略,`v-html` 指令的内容会编译为 `rich-text` 组件渲染为该标签的子节点。
::: :::
示例 [详情](<!-- VUEJSON.E_directive.v-html_v-html-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_directive.v-html_v-html-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-html_v-html-options.webUrl -->
>选项式 API
<!-- VUEJSON.E_directive.v-html_v-html-options.code --> ::: preview <!-- VUEJSON.E_directive.v-html_v-html-composition.webUrl -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_directive.v-html_v-html-composition.code --> <!-- VUEJSON.E_directive.v-html_v-html-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-html_v-html-options.code -->
::: :::
...@@ -56,18 +56,18 @@ ...@@ -56,18 +56,18 @@
基于表达式值的真假性,来改变元素的可见性。 基于表达式值的真假性,来改变元素的可见性。
示例 [详情](<!-- VUEJSON.E_directive.v-show_v-show-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_directive.v-show_v-show-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-show_v-show-options.webUrl --> ::: preview <!-- VUEJSON.E_directive.v-show_v-show-composition.webUrl -->
>选项式 API
<!-- VUEJSON.E_directive.v-show_v-show-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_directive.v-show_v-show-composition.code --> <!-- VUEJSON.E_directive.v-show_v-show-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-show_v-show-options.code -->
::: :::
### v-if ### v-if
...@@ -80,18 +80,18 @@ ...@@ -80,18 +80,18 @@
可用于 `<template>` 表示仅包含文本或多个元素的条件块。 可用于 `<template>` 表示仅包含文本或多个元素的条件块。
示例 [详情](<!-- VUEJSON.E_directive.v-if_v-if-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_directive.v-if_v-if-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-if_v-if-options.webUrl -->
>选项式 API ::: preview <!-- VUEJSON.E_directive.v-if_v-if-composition.webUrl -->
<!-- VUEJSON.E_directive.v-if_v-if-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_directive.v-if_v-if-composition.code --> <!-- VUEJSON.E_directive.v-if_v-if-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-if_v-if-options.code -->
::: :::
### v-for ### v-for
...@@ -117,18 +117,18 @@ ...@@ -117,18 +117,18 @@
</view> </view>
``` ```
示例 [详情](<!-- VUEJSON.E_directive.v-for_v-for-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_directive.v-for_v-for-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-for_v-for-options.webUrl -->
>选项式 API ::: preview <!-- VUEJSON.E_directive.v-for_v-for-composition.webUrl -->
<!-- VUEJSON.E_directive.v-for_v-for-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_directive.v-for_v-for-composition.code --> <!-- VUEJSON.E_directive.v-for_v-for-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-for_v-for-options.code -->
::: :::
### v-on ### v-on
...@@ -147,18 +147,18 @@ ...@@ -147,18 +147,18 @@
- [事件修饰符](https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6) 只支持 `stop``once` - [事件修饰符](https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6) 只支持 `stop``once`
示例 [详情](<!-- VUEJSON.E_directive.v-on_v-on-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_directive.v-on_v-on-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-on_v-on-options.webUrl -->
>选项式 API ::: preview <!-- VUEJSON.E_directive.v-on_v-on-composition.webUrl -->
<!-- VUEJSON.E_directive.v-on_v-on-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_directive.v-on_v-on-composition.code --> <!-- VUEJSON.E_directive.v-on_v-on-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-on_v-on-options.code -->
::: :::
### v-bind ### v-bind
...@@ -181,18 +181,18 @@ ...@@ -181,18 +181,18 @@
当不带参数使用时,可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。 当不带参数使用时,可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。
示例 [详情](<!-- VUEJSON.E_directive.v-bind_v-bind-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_directive.v-bind_v-bind-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-bind_v-bind-options.webUrl -->
>选项式 API ::: preview <!-- VUEJSON.E_directive.v-bind_v-bind-composition.webUrl -->
<!-- VUEJSON.E_directive.v-bind_v-bind-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_directive.v-bind_v-bind-composition.code --> <!-- VUEJSON.E_directive.v-bind_v-bind-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-bind_v-bind-options.code -->
::: :::
### v-model ### v-model
...@@ -206,18 +206,18 @@ ...@@ -206,18 +206,18 @@
- `.number` - 将输入的合法字符串转为数字 - `.number` - 将输入的合法字符串转为数字
- `.trim` - 移除输入内容两端空格 - `.trim` - 移除输入内容两端空格
示例 [详情](<!-- VUEJSON.E_directive.v-model_v-model-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_directive.v-model_v-model-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-model_v-model-options.webUrl -->
>选项式 API
<!-- VUEJSON.E_directive.v-model_v-model-options.code --> ::: preview <!-- VUEJSON.E_directive.v-model_v-model-composition.webUrl -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_directive.v-model_v-model-composition.code --> <!-- VUEJSON.E_directive.v-model_v-model-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-model_v-model-options.code -->
::: :::
### v-pre ### v-pre
...@@ -248,18 +248,18 @@ ...@@ -248,18 +248,18 @@
在随后的重新渲染,元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。 在随后的重新渲染,元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。
示例 [详情](<!-- VUEJSON.E_directive.v-once_v-once-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_directive.v-once_v-once-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-once_v-once-options.webUrl -->
>选项式 API
<!-- VUEJSON.E_directive.v-once_v-once-options.code --> ::: preview <!-- VUEJSON.E_directive.v-once_v-once-composition.webUrl -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_directive.v-once_v-once-composition.code --> <!-- VUEJSON.E_directive.v-once_v-once-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-once_v-once-options.code -->
::: :::
### v-slot ### v-slot
...@@ -276,18 +276,18 @@ ...@@ -276,18 +276,18 @@
- `<template>` - `<template>`
- [components](./component.md) (用于带有 prop 的单个默认插槽) - [components](./component.md) (用于带有 prop 的单个默认插槽)
示例 [详情](<!-- VUEJSON.E_directive.v-slot_v-slot-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_directive.v-slot_v-slot-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-slot_v-slot-options.webUrl --> ::: preview <!-- VUEJSON.E_directive.v-slot_v-slot-composition.webUrl -->
>选项式 API
<!-- VUEJSON.E_directive.v-slot_v-slot-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_directive.v-slot_v-slot-composition.code --> <!-- VUEJSON.E_directive.v-slot_v-slot-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-slot_v-slot-options.code -->
::: :::
### v-memo ### v-memo
...@@ -318,18 +318,18 @@ ...@@ -318,18 +318,18 @@
`v-memo` 也能被用于在一些默认优化失败的边际情况下,手动避免子组件出现不需要的更新。但是一样的,开发者需要负责指定正确的依赖数组以免跳过必要的更新。 `v-memo` 也能被用于在一些默认优化失败的边际情况下,手动避免子组件出现不需要的更新。但是一样的,开发者需要负责指定正确的依赖数组以免跳过必要的更新。
示例 [详情](<!-- VUEJSON.E_directive.v-memo_v-memo-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_directive.v-memo_v-memo-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-memo_v-memo-options.webUrl --> ::: preview <!-- VUEJSON.E_directive.v-memo_v-memo-composition.webUrl -->
>选项式 API
<!-- VUEJSON.E_directive.v-memo_v-memo-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_directive.v-memo_v-memo-composition.code --> <!-- VUEJSON.E_directive.v-memo_v-memo-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-memo_v-memo-options.code -->
::: :::
## 组件 @component ## 组件 @component
......
...@@ -140,73 +140,73 @@ export default { ...@@ -140,73 +140,73 @@ export default {
#### 向组件传递 `props` @transfer-component-props #### 向组件传递 `props` @transfer-component-props
示例 [详情](<!-- VUEJSON.E_component-instance.props_props-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_component-instance.props_props-composition.gitUrl -->)
::: warning 注意 ::: warning 注意
- 选项式 API:`this.$props``Map` 类型,需要使用 `this.$props["propName"]` 来访问 - 选项式 API:`this.$props``Map` 类型,需要使用 `this.$props["propName"]` 来访问
- 组合式 API:可以使用 `.` 点操作符来访问 - 组合式 API:可以使用 `.` 点操作符来访问
::: :::
::: preview <!-- VUEJSON.E_component-instance.props_props-options.webUrl --> ::: preview <!-- VUEJSON.E_component-instance.props_props-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_component-instance.props_props-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_component-instance.props_props-composition.code --> <!-- VUEJSON.E_component-instance.props_props-composition.code -->
::: > 选项式 API
#### 向组件传递回调函数 @transfer-component-method <!-- VUEJSON.E_component-instance.props_props-options.code -->
示例 [详情](<!-- VUEJSON.E_component-instance.emit-function_emit-function-options.gitUrl -->) :::
::: preview <!-- VUEJSON.E_component-instance.emit-function_emit-function-options.webUrl --> #### 向组件传递回调函数 @transfer-component-method
> 选项式 API 示例 [详情](<!-- VUEJSON.E_component-instance.emit-function_emit-function-composition.gitUrl -->)
<!-- VUEJSON.E_component-instance.emit-function_emit-function-options.code --> ::: preview <!-- VUEJSON.E_component-instance.emit-function_emit-function-composition.webUrl -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_component-instance.emit-function_emit-function-composition.code --> <!-- VUEJSON.E_component-instance.emit-function_emit-function-composition.code -->
::: > 选项式 API
#### 使用 `provide/inject` 来向下传递参数 @provide-inject <!-- VUEJSON.E_component-instance.emit-function_emit-function-options.code -->
示例 [详情](<!-- VUEJSON.E_component-instance.provide_provide-options-1.gitUrl -->) :::
::: preview <!-- VUEJSON.E_component-instance.provide_provide-options-1.webUrl --> #### 使用 `provide/inject` 来向下传递参数 @provide-inject
> 选项式 API 示例 [详情](<!-- VUEJSON.E_component-instance.provide_provide-composition.gitUrl -->)
<!-- VUEJSON.E_component-instance.provide_provide-options-1.code --> ::: preview <!-- VUEJSON.E_component-instance.provide_provide-composition.webUrl -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_component-instance.provide_provide-composition.code --> <!-- VUEJSON.E_component-instance.provide_provide-composition.code -->
> 选项式 API
<!-- VUEJSON.E_component-instance.provide_provide-options-1.code -->
::: :::
#### 使用 [全局变量与状态管理](../tutorial/store.md) @global-store #### 使用 [全局变量与状态管理](../tutorial/store.md) @global-store
> store/index.uts [文件详情](https://gitcode.net/dcloud/hello-uvue/-/blob/alpha/store/index.uts) > store/index.uts [文件详情](https://gitcode.net/dcloud/hello-uvue/-/blob/alpha/store/index.uts)
示例 [详情](<!-- VUEJSON.E_examples.nested-component-communication_nested-component-communication-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_examples.nested-component-communication_nested-component-communication-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_examples.nested-component-communication_nested-component-communication-options.webUrl -->
> 选项式 API
<!-- VUEJSON.E_examples.nested-component-communication_nested-component-communication-options.code --> ::: preview <!-- VUEJSON.E_examples.nested-component-communication_nested-component-communication-composition.webUrl -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_examples.nested-component-communication_nested-component-communication-composition.code --> <!-- VUEJSON.E_examples.nested-component-communication_nested-component-communication-composition.code -->
> 选项式 API
<!-- VUEJSON.E_examples.nested-component-communication_nested-component-communication-options.code -->
::: :::
#### 在 `main.uts` 中使用 `app.config.globalProperties` #### 在 `main.uts` 中使用 `app.config.globalProperties`
...@@ -220,18 +220,18 @@ app.config.globalProperties.globalPropertiesReactiveObj = reactive({ ...@@ -220,18 +220,18 @@ app.config.globalProperties.globalPropertiesReactiveObj = reactive({
} as UTSJSONObject) } as UTSJSONObject)
``` ```
示例 [详情](<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_app-instance.globalProperties_globalProperties-options.webUrl --> ::: preview <!-- VUEJSON.E_app-instance.globalProperties_globalProperties-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-composition.code --> <!-- VUEJSON.E_app-instance.globalProperties_globalProperties-composition.code -->
> 选项式 API
<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-options.code -->
::: :::
...@@ -251,18 +251,18 @@ easycom组件,用法和内置组件一样。也是使用 `this.$refs` 获取 ...@@ -251,18 +251,18 @@ easycom组件,用法和内置组件一样。也是使用 `this.$refs` 获取
```(this.$refs['组件ref属性值'] as 驼峰ComponentPublicInstance)?.foo?.();``` ```(this.$refs['组件ref属性值'] as 驼峰ComponentPublicInstance)?.foo?.();```
示例 [详情](<!-- VUEJSON.E_component-instance.methods_call-method-easycom-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_component-instance.methods_call-method-easycom-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_component-instance.methods_call-method-easycom-options.webUrl -->
> 选项式 API ::: preview <!-- VUEJSON.E_component-instance.methods_call-method-easycom-composition.webUrl -->
<!-- VUEJSON.E_component-instance.methods_call-method-easycom-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_component-instance.methods_call-method-easycom-composition.code --> <!-- VUEJSON.E_component-instance.methods_call-method-easycom-composition.code -->
> 选项式 API
<!-- VUEJSON.E_component-instance.methods_call-method-easycom-options.code -->
::: :::
##### 调用 `uni_modules easycom` 组件方法 <Badge text="HBuilderX 3.97+"> @call-uni-modules-easycom-component-method ##### 调用 `uni_modules easycom` 组件方法 <Badge text="HBuilderX 3.97+"> @call-uni-modules-easycom-component-method
...@@ -271,18 +271,18 @@ easycom组件,用法和内置组件一样。也是使用 `this.$refs` 获取 ...@@ -271,18 +271,18 @@ easycom组件,用法和内置组件一样。也是使用 `this.$refs` 获取
> 在调用组件方法的时候如报错 `error: Reference has a nullable type` 则需要使用 `?.` 操作符(如:a?.b?.())。 > 在调用组件方法的时候如报错 `error: Reference has a nullable type` 则需要使用 `?.` 操作符(如:a?.b?.())。
示例 [详情](<!-- VUEJSON.E_component-instance.methods_call-method-easycom-uni-modules-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_component-instance.methods_call-method-easycom-uni-modules-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_component-instance.methods_call-method-easycom-uni-modules-options.webUrl -->
> 选项式 API ::: preview <!-- VUEJSON.E_component-instance.methods_call-method-easycom-uni-modules-composition.webUrl -->
<!-- VUEJSON.E_component-instance.methods_call-method-easycom-uni-modules-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_component-instance.methods_call-method-easycom-uni-modules-composition.code --> <!-- VUEJSON.E_component-instance.methods_call-method-easycom-uni-modules-composition.code -->
> 选项式 API
<!-- VUEJSON.E_component-instance.methods_call-method-easycom-uni-modules-options.code -->
::: :::
#### 使用 `ref` 属性搭配 `$callMethod` 方法 @call-component-method #### 使用 `ref` 属性搭配 `$callMethod` 方法 @call-component-method
...@@ -301,18 +301,18 @@ callMethod可用于所有自定义组件,包括easycom组件也可以使用, ...@@ -301,18 +301,18 @@ callMethod可用于所有自定义组件,包括easycom组件也可以使用,
ComponentPublicInstance ComponentPublicInstance
示例 [详情](<!-- VUEJSON.E_component-instance.parent_parent-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_component-instance.parent_parent-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_component-instance.parent_parent-options.webUrl --> ::: preview <!-- VUEJSON.E_component-instance.parent_parent-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_component-instance.parent_parent-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_component-instance.parent_parent-composition.code --> <!-- VUEJSON.E_component-instance.parent_parent-composition.code -->
> 选项式 API
<!-- VUEJSON.E_component-instance.parent_parent-options.code -->
::: :::
**注意:** **注意:**
...@@ -338,18 +338,18 @@ Uni`组件名(驼峰)`Element ...@@ -338,18 +338,18 @@ Uni`组件名(驼峰)`Element
`<picker-view>`: UniPickerViewElement `<picker-view>`: UniPickerViewElement
示例 [详情](<!-- VUEJSON.E_component-instance.methods_call-method-uni-element-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_component-instance.methods_call-method-uni-element-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_component-instance.methods_call-method-uni-element-options.webUrl -->
> 选项式 API ::: preview <!-- VUEJSON.E_component-instance.methods_call-method-uni-element-composition.webUrl -->
<!-- VUEJSON.E_component-instance.methods_call-method-uni-element-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_component-instance.methods_call-method-uni-element-composition.code --> <!-- VUEJSON.E_component-instance.methods_call-method-uni-element-composition.code -->
> 选项式 API
<!-- VUEJSON.E_component-instance.methods_call-method-uni-element-options.code -->
::: :::
**bug&tips** **bug&tips**
...@@ -369,18 +369,18 @@ Uni`组件名(驼峰)`Element ...@@ -369,18 +369,18 @@ Uni`组件名(驼峰)`Element
2. onPageHide、onPageShow 需要写在 setup 函数或者 `<script setup>` 中才能生效 2. onPageHide、onPageShow 需要写在 setup 函数或者 `<script setup>` 中才能生效
::: :::
示例 [详情](<!-- VUEJSON.E_lifecycle.page_monitor-page-lifecycle-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_lifecycle.page_monitor-page-lifecycle-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_lifecycle.page_page-options.webUrl --> ::: preview <!-- VUEJSON.E_lifecycle.page_page-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_lifecycle.page_monitor-page-lifecycle-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_lifecycle.page_monitor-page-lifecycle-composition.code --> <!-- VUEJSON.E_lifecycle.page_monitor-page-lifecycle-composition.code -->
> 选项式 API
<!-- VUEJSON.E_lifecycle.page_monitor-page-lifecycle-options.code -->
::: :::
## 组件的生命周期 @component-lifecycle ## 组件的生命周期 @component-lifecycle
...@@ -395,16 +395,16 @@ Uni`组件名(驼峰)`Element ...@@ -395,16 +395,16 @@ Uni`组件名(驼峰)`Element
示例 [详情](<!-- VUEJSON.E_lifecycle.component_ChildComponentOptions.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_lifecycle.component_ChildComponentOptions.gitUrl -->)
::: preview <!-- VUEJSON.E_lifecycle.component_component-options.webUrl --> ::: preview <!-- VUEJSON.E_lifecycle.component_component-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_lifecycle.component_ChildComponentOptions.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_lifecycle.component_ChildComponentComposition.code --> <!-- VUEJSON.E_lifecycle.component_ChildComponentComposition.code -->
> 选项式 API
<!-- VUEJSON.E_lifecycle.component_ChildComponentOptions.code -->
::: :::
## 全局组件 @global-component ## 全局组件 @global-component
...@@ -418,17 +418,17 @@ Uni`组件名(驼峰)`Element ...@@ -418,17 +418,17 @@ Uni`组件名(驼峰)`Element
- 复杂数据类型需要通过 `PropType` 标记类型,[详见](https://cn.vuejs.org/guide/typescript/options-api.html#typing-component-props) - 复杂数据类型需要通过 `PropType` 标记类型,[详见](https://cn.vuejs.org/guide/typescript/options-api.html#typing-component-props)
- `type` 不支持使用自定义的构造函数。 - `type` 不支持使用自定义的构造函数。
示例 [详情](<!-- VUEJSON.E_component-instance.props_props-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_component-instance.props_props-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_component-instance.props_props-options.webUrl -->
> 选项式 API
<!-- VUEJSON.E_component-instance.props_props-options.code -->
::: preview <!-- VUEJSON.E_component-instance.props_props-composition.webUrl -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_component-instance.props_props-composition.code --> <!-- VUEJSON.E_component-instance.props_props-composition.code -->
> 选项式 API
<!-- VUEJSON.E_component-instance.props_props-options.code -->
::: :::
## ref ## ref
...@@ -441,9 +441,9 @@ Uni`组件名(驼峰)`Element ...@@ -441,9 +441,9 @@ Uni`组件名(驼峰)`Element
-`v-for` 循环时,绑定 `ref` 属性会获取到节点或组件实例的集合。 -`v-for` 循环时,绑定 `ref` 属性会获取到节点或组件实例的集合。
-`uni-app x` 中,要访问 `$refs` 中的属性,需要使用索引方式。 -`uni-app x` 中,要访问 `$refs` 中的属性,需要使用索引方式。
示例 [详情](<!-- VUEJSON.E_component-instance.refs_refs-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_component-instance.refs_refs-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_component-instance.refs_refs-options.webUrl --> ::: preview <!-- VUEJSON.E_component-instance.refs_refs-composition.webUrl -->
> uni-app x(选项式) > uni-app x(选项式)
<!-- VUEJSON.E_component-instance.refs_refs-options.code --> <!-- VUEJSON.E_component-instance.refs_refs-options.code -->
...@@ -521,18 +521,18 @@ Uni`组件名(驼峰)`Element ...@@ -521,18 +521,18 @@ Uni`组件名(驼峰)`Element
## 作用域插槽的类型 @scoped-slot-type ## 作用域插槽的类型 @scoped-slot-type
示例 [详情](<!-- VUEJSON.E_built-in.special-elements_slots_child-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_built-in.special-elements_slots_child-composition.gitUrl -->)
作用域插槽需在组件中指定插槽数据类型 作用域插槽需在组件中指定插槽数据类型
::: preview <!-- VUEJSON.E_built-in.special-elements_slots_child-options.webUrl --> ::: preview <!-- VUEJSON.E_built-in.special-elements_slots_child-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_built-in.special-elements_slots_child-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_built-in.special-elements_slots_child-composition.code --> <!-- VUEJSON.E_built-in.special-elements_slots_child-composition.code -->
> 选项式 API
<!-- VUEJSON.E_built-in.special-elements_slots_child-options.code -->
::: :::
## 递归组件 ## 递归组件
......
...@@ -121,15 +121,15 @@ const counter = ref({ count: 0 } as Counter) // 而不是 ref<Counter>({count: 0 ...@@ -121,15 +121,15 @@ const counter = ref({ count: 0 } as Counter) // 而不是 ref<Counter>({count: 0
- `v-if``v-else-if``v-else` - `v-if``v-else-if``v-else`
- `v-for` - `v-for`
示例 [详情](<!-- VUEJSON.E_built-in.special-elements_template_template-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_built-in.special-elements_template_template-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_built-in.special-elements_template_template-options.webUrl --> ::: preview <!-- VUEJSON.E_built-in.special-elements_template_template-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_built-in.special-elements_template_template-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_built-in.special-elements_template_template-composition.code --> <!-- VUEJSON.E_built-in.special-elements_template_template-composition.code -->
> 选项式 API
<!-- VUEJSON.E_built-in.special-elements_template_template-options.code -->
::: :::
### 在样式里绑定 @v-bind-css-data ### 在样式里绑定 @v-bind-css-data
...@@ -144,15 +144,15 @@ const counter = ref({ count: 0 } as Counter) // 而不是 ref<Counter>({count: 0 ...@@ -144,15 +144,15 @@ const counter = ref({ count: 0 } as Counter) // 而不是 ref<Counter>({count: 0
`v-bind` 也可在样式中使用,可以很方便的在 uts 中改变样式,如下所示: `v-bind` 也可在样式中使用,可以很方便的在 uts 中改变样式,如下所示:
示例 [详情](<!-- VUEJSON.E_directive.v-bind_v-bind-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_directive.v-bind_v-bind-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-bind_v-bind-options.webUrl --> ::: preview <!-- VUEJSON.E_directive.v-bind_v-bind-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_directive.v-bind_v-bind-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_directive.v-bind_v-bind-composition.code --> <!-- VUEJSON.E_directive.v-bind_v-bind-composition.code -->
> 选项式 API
<!-- VUEJSON.E_directive.v-bind_v-bind-options.code -->
::: :::
## 定义方法 @methods ## 定义方法 @methods
......
...@@ -37,15 +37,15 @@ export function createApp() { ...@@ -37,15 +37,15 @@ export function createApp() {
支持传递插件参数,当传递插件参数时,`app` 的类型需要指定为 `VueApp` 支持传递插件参数,当传递插件参数时,`app` 的类型需要指定为 `VueApp`
示例 [详情](<!-- VUEJSON.E_app-instance.use_use-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_app-instance.use_use-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_app-instance.use_use-options.webUrl --> ::: preview <!-- VUEJSON.E_app-instance.use_use-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_app-instance.use_use-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_app-instance.use_use-composition.code --> <!-- VUEJSON.E_app-instance.use_use-composition.code -->
> 选项式 API
<!-- VUEJSON.E_app-instance.use_use-options.code -->
::: :::
### app.config.globalProperties ### app.config.globalProperties
...@@ -57,15 +57,15 @@ export function createApp() { ...@@ -57,15 +57,15 @@ export function createApp() {
`globalProperties` 在编译时处理,因此确保你的操作在编译时是可知的。例如,将变量赋值给 `globalProperties` 时,这个变量在编译时必须是已知的,而不能是在运行时才能确定的变量。 `globalProperties` 在编译时处理,因此确保你的操作在编译时是可知的。例如,将变量赋值给 `globalProperties` 时,这个变量在编译时必须是已知的,而不能是在运行时才能确定的变量。
件参数,当传递插件参数时,`app` 的类型需要指定为 `VueApp` 件参数,当传递插件参数时,`app` 的类型需要指定为 `VueApp`
示例 [详情](<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_app-instance.globalProperties_globalProperties-options.webUrl --> ::: preview <!-- VUEJSON.E_app-instance.globalProperties_globalProperties-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-composition.code --> <!-- VUEJSON.E_app-instance.globalProperties_globalProperties-composition.code -->
> 选项式 API
<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-options.code -->
::: :::
## 应用生命周期 @app-lifecycle ## 应用生命周期 @app-lifecycle
......
...@@ -102,15 +102,15 @@ ...@@ -102,15 +102,15 @@
预编译的模板,例如单文件组件中的模板,会在构建时被编译为 `render` 选项。如果一个组件中同时存在 `render``template,则` `render` 将具有更高的优先级。 预编译的模板,例如单文件组件中的模板,会在构建时被编译为 `render` 选项。如果一个组件中同时存在 `render``template,则` `render` 将具有更高的优先级。
示例 [详情](<!-- VUEJSON.E_render-function.render_render-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_render-function.render_render-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_render-function.render_render-options.webUrl --> ::: preview <!-- VUEJSON.E_render-function.render_render-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_render-function.render_render-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_render-function.render_render-composition.code --> <!-- VUEJSON.E_render-function.render_render-composition.code -->
> 选项式 API
<!-- VUEJSON.E_render-function.render_render-options.code -->
::: :::
#### slots #### slots
...@@ -261,18 +261,18 @@ ...@@ -261,18 +261,18 @@
- 在 Vue 开发者工具中的组件树显示时 - 在 Vue 开发者工具中的组件树显示时
- 在组件抛出的警告追踪栈信息中显示时 - 在组件抛出的警告追踪栈信息中显示时
示例 [详情](<!-- VUEJSON.E_component-instance.circular-reference_circular-reference-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_component-instance.circular-reference_circular-reference-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_component-instance.circular-reference_circular-reference-options.webUrl --> ::: preview <!-- VUEJSON.E_component-instance.circular-reference_circular-reference-composition.webUrl -->
> 选项式 API
<!-- VUEJSON.E_component-instance.circular-reference_circular-reference-options.code -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_component-instance.circular-reference_circular-reference-composition.code --> <!-- VUEJSON.E_component-instance.circular-reference_circular-reference-composition.code -->
> 选项式 API
<!-- VUEJSON.E_component-instance.circular-reference_circular-reference-options.code -->
::: :::
#### inheritAttrs #### inheritAttrs
...@@ -299,18 +299,18 @@ ...@@ -299,18 +299,18 @@
一个对象,用于注册对当前组件实例可用的组件。 一个对象,用于注册对当前组件实例可用的组件。
示例 [详情](<!-- VUEJSON.E_component-instance.attrs_attrs-options.gitUrl -->) 示例 [详情](<!-- VUEJSON.E_component-instance.attrs_attrs-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_component-instance.attrs_attrs-options.webUrl -->
> 选项式 API
<!-- VUEJSON.E_component-instance.attrs_attrs-options.code --> ::: preview <!-- VUEJSON.E_component-instance.attrs_attrs-composition.webUrl -->
> 组合式 API > 组合式 API
<!-- VUEJSON.E_component-instance.attrs_attrs-composition.code --> <!-- VUEJSON.E_component-instance.attrs_attrs-composition.code -->
> 选项式 API
<!-- VUEJSON.E_component-instance.attrs_attrs-options.code -->
::: :::
- 参考[组件](./component.md) - 参考[组件](./component.md)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册