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

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

上级 abd5db44
......@@ -18,15 +18,15 @@
为了方便阅读,当子节点不是插槽对象时,可以省略 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 -->
> 选项式 API
<!-- VUEJSON.E_render-function.render_render-options.code -->
::: preview <!-- VUEJSON.E_render-function.render_render-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_render-function.render_render-composition.code -->
> 选项式 API
<!-- VUEJSON.E_render-function.render_render-options.code -->
:::
#### mergeProps()
......@@ -42,15 +42,15 @@
- onXxx 事件监听器——多个同名的事件监听器将被合并到一个数组。
如果你不需要合并行为而是简单覆盖,可以使用原生 object spread 语法来代替。
- 示例 [详情](<!-- VUEJSON.E_render-function.mergeProps_mergeProps-options.gitUrl -->)
::: preview <!-- VUEJSON.E_render-function.mergeProps_mergeProps-options.webUrl -->
- 示例 [详情](<!-- VUEJSON.E_render-function.mergeProps_mergeProps-composition.gitUrl -->)
> 选项式 API
<!-- VUEJSON.E_render-function.mergeProps_mergeProps-options.code -->
::: preview <!-- VUEJSON.E_render-function.mergeProps_mergeProps-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_render-function.mergeProps_mergeProps-composition.code -->
> 选项式 API
<!-- VUEJSON.E_render-function.mergeProps_mergeProps-options.code -->
:::
#### cloneVNode()
......@@ -65,30 +65,30 @@
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 -->
> 选项式 API
<!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-options.code -->
::: preview <!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-composition.code -->
> 选项式 API
<!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-options.code -->
:::
#### isVNode()
判断一个值是否为 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 -->
> 选项式 API
<!-- VUEJSON.E_render-function.isVNode_isVNode-options.code -->
::: preview <!-- VUEJSON.E_render-function.isVNode_isVNode-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_render-function.isVNode_isVNode-composition.code -->
> 选项式 API
<!-- VUEJSON.E_render-function.isVNode_isVNode-options.code -->
:::
#### resolveComponent()
......@@ -103,15 +103,15 @@
如果组件未找到,会抛出一个运行时警告,并返回组件名字符串。
- 示例 [详情](<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-options.gitUrl -->)
::: preview <!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-options.webUrl -->
- 示例 [详情](<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-composition.gitUrl -->)
> 选项式 API
<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-options.code -->
::: preview <!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-composition.code -->
> 选项式 API
<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-options.code -->
:::
#### withDirectives()
......@@ -122,15 +122,15 @@
用自定义指令包装一个现有的 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 -->
> 选项式 API
<!-- VUEJSON.E_render-function.withDirectives_withDirectives-options.code -->
::: preview <!-- VUEJSON.E_render-function.withDirectives_withDirectives-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_render-function.withDirectives_withDirectives-composition.code -->
> 选项式 API
<!-- VUEJSON.E_render-function.withDirectives_withDirectives-options.code -->
:::
#### withModifiers()
......
......@@ -13,18 +13,18 @@
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 -->
>选项式 API
<!-- VUEJSON.E_directive.v-text_v-text-options.code -->
::: preview <!-- VUEJSON.E_directive.v-text_v-text-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_directive.v-text_v-text-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-text_v-text-options.code -->
:::
### v-html
......@@ -37,18 +37,18 @@
绑定 `v-html` 的标签内的内容会被忽略,`v-html` 指令的内容会编译为 `rich-text` 组件渲染为该标签的子节点。
:::
示例 [详情](<!-- VUEJSON.E_directive.v-html_v-html-options.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-html_v-html-options.webUrl -->
>选项式 API
示例 [详情](<!-- VUEJSON.E_directive.v-html_v-html-composition.gitUrl -->)
<!-- VUEJSON.E_directive.v-html_v-html-options.code -->
::: preview <!-- VUEJSON.E_directive.v-html_v-html-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_directive.v-html_v-html-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-html_v-html-options.code -->
:::
......@@ -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 -->
>选项式 API
<!-- VUEJSON.E_directive.v-show_v-show-options.code -->
::: preview <!-- VUEJSON.E_directive.v-show_v-show-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_directive.v-show_v-show-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-show_v-show-options.code -->
:::
### v-if
......@@ -80,18 +80,18 @@
可用于 `<template>` 表示仅包含文本或多个元素的条件块。
示例 [详情](<!-- VUEJSON.E_directive.v-if_v-if-options.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-if_v-if-options.webUrl -->
示例 [详情](<!-- VUEJSON.E_directive.v-if_v-if-composition.gitUrl -->)
>选项式 API
<!-- VUEJSON.E_directive.v-if_v-if-options.code -->
::: preview <!-- VUEJSON.E_directive.v-if_v-if-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_directive.v-if_v-if-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-if_v-if-options.code -->
:::
### v-for
......@@ -117,18 +117,18 @@
</view>
```
示例 [详情](<!-- VUEJSON.E_directive.v-for_v-for-options.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-for_v-for-options.webUrl -->
示例 [详情](<!-- VUEJSON.E_directive.v-for_v-for-composition.gitUrl -->)
>选项式 API
<!-- VUEJSON.E_directive.v-for_v-for-options.code -->
::: preview <!-- VUEJSON.E_directive.v-for_v-for-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_directive.v-for_v-for-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-for_v-for-options.code -->
:::
### v-on
......@@ -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`
示例 [详情](<!-- VUEJSON.E_directive.v-on_v-on-options.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-on_v-on-options.webUrl -->
示例 [详情](<!-- VUEJSON.E_directive.v-on_v-on-composition.gitUrl -->)
>选项式 API
<!-- VUEJSON.E_directive.v-on_v-on-options.code -->
::: preview <!-- VUEJSON.E_directive.v-on_v-on-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_directive.v-on_v-on-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-on_v-on-options.code -->
:::
### v-bind
......@@ -181,18 +181,18 @@
当不带参数使用时,可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。
示例 [详情](<!-- VUEJSON.E_directive.v-bind_v-bind-options.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-bind_v-bind-options.webUrl -->
示例 [详情](<!-- VUEJSON.E_directive.v-bind_v-bind-composition.gitUrl -->)
>选项式 API
<!-- VUEJSON.E_directive.v-bind_v-bind-options.code -->
::: preview <!-- VUEJSON.E_directive.v-bind_v-bind-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_directive.v-bind_v-bind-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-bind_v-bind-options.code -->
:::
### v-model
......@@ -206,18 +206,18 @@
- `.number` - 将输入的合法字符串转为数字
- `.trim` - 移除输入内容两端空格
示例 [详情](<!-- VUEJSON.E_directive.v-model_v-model-options.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-model_v-model-options.webUrl -->
>选项式 API
示例 [详情](<!-- VUEJSON.E_directive.v-model_v-model-composition.gitUrl -->)
<!-- VUEJSON.E_directive.v-model_v-model-options.code -->
::: preview <!-- VUEJSON.E_directive.v-model_v-model-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_directive.v-model_v-model-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-model_v-model-options.code -->
:::
### v-pre
......@@ -248,18 +248,18 @@
在随后的重新渲染,元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。
示例 [详情](<!-- VUEJSON.E_directive.v-once_v-once-options.gitUrl -->)
::: preview <!-- VUEJSON.E_directive.v-once_v-once-options.webUrl -->
>选项式 API
示例 [详情](<!-- VUEJSON.E_directive.v-once_v-once-composition.gitUrl -->)
<!-- VUEJSON.E_directive.v-once_v-once-options.code -->
::: preview <!-- VUEJSON.E_directive.v-once_v-once-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_directive.v-once_v-once-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-once_v-once-options.code -->
:::
### v-slot
......@@ -276,18 +276,18 @@
- `<template>`
- [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 -->
>选项式 API
<!-- VUEJSON.E_directive.v-slot_v-slot-options.code -->
::: preview <!-- VUEJSON.E_directive.v-slot_v-slot-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_directive.v-slot_v-slot-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-slot_v-slot-options.code -->
:::
### v-memo
......@@ -318,18 +318,18 @@
`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 -->
>选项式 API
<!-- VUEJSON.E_directive.v-memo_v-memo-options.code -->
::: preview <!-- VUEJSON.E_directive.v-memo_v-memo-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_directive.v-memo_v-memo-composition.code -->
>选项式 API
<!-- VUEJSON.E_directive.v-memo_v-memo-options.code -->
:::
## 组件 @component
......
......@@ -140,73 +140,73 @@ export default {
#### 向组件传递 `props` @transfer-component-props
示例 [详情](<!-- VUEJSON.E_component-instance.props_props-options.gitUrl -->)
示例 [详情](<!-- VUEJSON.E_component-instance.props_props-composition.gitUrl -->)
::: warning 注意
- 选项式 API:`this.$props``Map` 类型,需要使用 `this.$props["propName"]` 来访问
- 组合式 API:可以使用 `.` 点操作符来访问
:::
::: 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
<!-- 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
<!-- 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
<!-- VUEJSON.E_component-instance.provide_provide-composition.code -->
> 选项式 API
<!-- VUEJSON.E_component-instance.provide_provide-options-1.code -->
:::
#### 使用 [全局变量与状态管理](../tutorial/store.md) @global-store
> 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 -->)
::: preview <!-- VUEJSON.E_examples.nested-component-communication_nested-component-communication-options.webUrl -->
> 选项式 API
示例 [详情](<!-- VUEJSON.E_examples.nested-component-communication_nested-component-communication-composition.gitUrl -->)
<!-- VUEJSON.E_examples.nested-component-communication_nested-component-communication-options.code -->
::: preview <!-- VUEJSON.E_examples.nested-component-communication_nested-component-communication-composition.webUrl -->
> 组合式 API
<!-- 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`
......@@ -220,18 +220,18 @@ app.config.globalProperties.globalPropertiesReactiveObj = reactive({
} 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 -->
> 选项式 API
<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-options.code -->
::: preview <!-- VUEJSON.E_app-instance.globalProperties_globalProperties-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-composition.code -->
> 选项式 API
<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-options.code -->
:::
......@@ -251,18 +251,18 @@ easycom组件,用法和内置组件一样。也是使用 `this.$refs` 获取
```(this.$refs['组件ref属性值'] as 驼峰ComponentPublicInstance)?.foo?.();```
示例 [详情](<!-- VUEJSON.E_component-instance.methods_call-method-easycom-options.gitUrl -->)
::: preview <!-- VUEJSON.E_component-instance.methods_call-method-easycom-options.webUrl -->
示例 [详情](<!-- VUEJSON.E_component-instance.methods_call-method-easycom-composition.gitUrl -->)
> 选项式 API
<!-- VUEJSON.E_component-instance.methods_call-method-easycom-options.code -->
::: preview <!-- VUEJSON.E_component-instance.methods_call-method-easycom-composition.webUrl -->
> 组合式 API
<!-- 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
......@@ -271,18 +271,18 @@ easycom组件,用法和内置组件一样。也是使用 `this.$refs` 获取
> 在调用组件方法的时候如报错 `error: Reference has a nullable type` 则需要使用 `?.` 操作符(如:a?.b?.())。
示例 [详情](<!-- VUEJSON.E_component-instance.methods_call-method-easycom-uni-modules-options.gitUrl -->)
::: preview <!-- VUEJSON.E_component-instance.methods_call-method-easycom-uni-modules-options.webUrl -->
示例 [详情](<!-- VUEJSON.E_component-instance.methods_call-method-easycom-uni-modules-composition.gitUrl -->)
> 选项式 API
<!-- VUEJSON.E_component-instance.methods_call-method-easycom-uni-modules-options.code -->
::: preview <!-- VUEJSON.E_component-instance.methods_call-method-easycom-uni-modules-composition.webUrl -->
> 组合式 API
<!-- 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
......@@ -301,18 +301,18 @@ callMethod可用于所有自定义组件,包括easycom组件也可以使用,
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 -->
> 选项式 API
<!-- VUEJSON.E_component-instance.parent_parent-options.code -->
::: preview <!-- VUEJSON.E_component-instance.parent_parent-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_component-instance.parent_parent-composition.code -->
> 选项式 API
<!-- VUEJSON.E_component-instance.parent_parent-options.code -->
:::
**注意:**
......@@ -338,18 +338,18 @@ Uni`组件名(驼峰)`Element
`<picker-view>`: UniPickerViewElement
示例 [详情](<!-- VUEJSON.E_component-instance.methods_call-method-uni-element-options.gitUrl -->)
::: preview <!-- VUEJSON.E_component-instance.methods_call-method-uni-element-options.webUrl -->
示例 [详情](<!-- VUEJSON.E_component-instance.methods_call-method-uni-element-composition.gitUrl -->)
> 选项式 API
<!-- VUEJSON.E_component-instance.methods_call-method-uni-element-options.code -->
::: preview <!-- VUEJSON.E_component-instance.methods_call-method-uni-element-composition.webUrl -->
> 组合式 API
<!-- 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**
......@@ -369,18 +369,18 @@ Uni`组件名(驼峰)`Element
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 -->
> 选项式 API
<!-- VUEJSON.E_lifecycle.page_monitor-page-lifecycle-options.code -->
::: preview <!-- VUEJSON.E_lifecycle.page_page-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_lifecycle.page_monitor-page-lifecycle-composition.code -->
> 选项式 API
<!-- VUEJSON.E_lifecycle.page_monitor-page-lifecycle-options.code -->
:::
## 组件的生命周期 @component-lifecycle
......@@ -395,16 +395,16 @@ Uni`组件名(驼峰)`Element
示例 [详情](<!-- VUEJSON.E_lifecycle.component_ChildComponentOptions.gitUrl -->)
::: preview <!-- VUEJSON.E_lifecycle.component_component-options.webUrl -->
> 选项式 API
<!-- VUEJSON.E_lifecycle.component_ChildComponentOptions.code -->
::: preview <!-- VUEJSON.E_lifecycle.component_component-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_lifecycle.component_ChildComponentComposition.code -->
> 选项式 API
<!-- VUEJSON.E_lifecycle.component_ChildComponentOptions.code -->
:::
## 全局组件 @global-component
......@@ -418,17 +418,17 @@ Uni`组件名(驼峰)`Element
- 复杂数据类型需要通过 `PropType` 标记类型,[详见](https://cn.vuejs.org/guide/typescript/options-api.html#typing-component-props)
- `type` 不支持使用自定义的构造函数。
示例 [详情](<!-- VUEJSON.E_component-instance.props_props-options.gitUrl -->)
::: preview <!-- VUEJSON.E_component-instance.props_props-options.webUrl -->
> 选项式 API
<!-- VUEJSON.E_component-instance.props_props-options.code -->
示例 [详情](<!-- VUEJSON.E_component-instance.props_props-composition.gitUrl -->)
::: preview <!-- VUEJSON.E_component-instance.props_props-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_component-instance.props_props-composition.code -->
> 选项式 API
<!-- VUEJSON.E_component-instance.props_props-options.code -->
:::
## ref
......@@ -441,9 +441,9 @@ Uni`组件名(驼峰)`Element
-`v-for` 循环时,绑定 `ref` 属性会获取到节点或组件实例的集合。
-`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(选项式)
<!-- VUEJSON.E_component-instance.refs_refs-options.code -->
......@@ -521,18 +521,18 @@ Uni`组件名(驼峰)`Element
## 作用域插槽的类型 @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 -->
> 选项式 API
<!-- VUEJSON.E_built-in.special-elements_slots_child-options.code -->
::: preview <!-- VUEJSON.E_built-in.special-elements_slots_child-composition.webUrl -->
> 组合式 API
<!-- 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
- `v-if``v-else-if``v-else`
- `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 -->
> 选项式 API
<!-- VUEJSON.E_built-in.special-elements_template_template-options.code -->
::: preview <!-- VUEJSON.E_built-in.special-elements_template_template-composition.webUrl -->
> 组合式 API
<!-- 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
......@@ -144,15 +144,15 @@ const counter = ref({ count: 0 } as Counter) // 而不是 ref<Counter>({count: 0
`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 -->
> 选项式 API
<!-- VUEJSON.E_directive.v-bind_v-bind-options.code -->
::: preview <!-- VUEJSON.E_directive.v-bind_v-bind-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_directive.v-bind_v-bind-composition.code -->
> 选项式 API
<!-- VUEJSON.E_directive.v-bind_v-bind-options.code -->
:::
## 定义方法 @methods
......
......@@ -37,15 +37,15 @@ export function createApp() {
支持传递插件参数,当传递插件参数时,`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 -->
> 选项式 API
<!-- VUEJSON.E_app-instance.use_use-options.code -->
::: preview <!-- VUEJSON.E_app-instance.use_use-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_app-instance.use_use-composition.code -->
> 选项式 API
<!-- VUEJSON.E_app-instance.use_use-options.code -->
:::
### app.config.globalProperties
......@@ -57,15 +57,15 @@ export function createApp() {
`globalProperties` 在编译时处理,因此确保你的操作在编译时是可知的。例如,将变量赋值给 `globalProperties` 时,这个变量在编译时必须是已知的,而不能是在运行时才能确定的变量。
件参数,当传递插件参数时,`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 -->
> 选项式 API
<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-options.code -->
::: preview <!-- VUEJSON.E_app-instance.globalProperties_globalProperties-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-composition.code -->
> 选项式 API
<!-- VUEJSON.E_app-instance.globalProperties_globalProperties-options.code -->
:::
## 应用生命周期 @app-lifecycle
......
......@@ -102,15 +102,15 @@
预编译的模板,例如单文件组件中的模板,会在构建时被编译为 `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 -->
> 选项式 API
<!-- VUEJSON.E_render-function.render_render-options.code -->
::: preview <!-- VUEJSON.E_render-function.render_render-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_render-function.render_render-composition.code -->
> 选项式 API
<!-- VUEJSON.E_render-function.render_render-options.code -->
:::
#### slots
......@@ -261,18 +261,18 @@
- 在 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 -->
> 选项式 API
<!-- VUEJSON.E_component-instance.circular-reference_circular-reference-options.code -->
::: preview <!-- VUEJSON.E_component-instance.circular-reference_circular-reference-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_component-instance.circular-reference_circular-reference-composition.code -->
> 选项式 API
<!-- VUEJSON.E_component-instance.circular-reference_circular-reference-options.code -->
:::
#### inheritAttrs
......@@ -299,18 +299,18 @@
一个对象,用于注册对当前组件实例可用的组件。
示例 [详情](<!-- VUEJSON.E_component-instance.attrs_attrs-options.gitUrl -->)
::: preview <!-- VUEJSON.E_component-instance.attrs_attrs-options.webUrl -->
> 选项式 API
示例 [详情](<!-- VUEJSON.E_component-instance.attrs_attrs-composition.gitUrl -->)
<!-- VUEJSON.E_component-instance.attrs_attrs-options.code -->
::: preview <!-- VUEJSON.E_component-instance.attrs_attrs-composition.webUrl -->
> 组合式 API
<!-- VUEJSON.E_component-instance.attrs_attrs-composition.code -->
> 选项式 API
<!-- VUEJSON.E_component-instance.attrs_attrs-options.code -->
:::
- 参考[组件](./component.md)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册