diff --git a/docs/collocation/manifest.md b/docs/collocation/manifest.md index 5f3e9857a1d5352cbe08d45b0fe92da4c5b4cf31..72bb9c1ae560a7d812770da2a17dd99db7d3150f 100644 --- a/docs/collocation/manifest.md +++ b/docs/collocation/manifest.md @@ -497,7 +497,7 @@ Tips:关于摇树优化(treeShaking)原理及优化结果,参考:[http |enableDistFileMinify |Boolean| 是否压缩编译产物(仅在真机预览/真机调试时生效),默认为false | |uniStatistics |Object |[支付宝小程序是否开启 uni 统计,配置方法同全局配置](/collocation/manifest?id=uniStatistics)| |scopedSlotsCompiler|String|Vue2 作用域插槽编译模式,uni-app 3.1.19+ 开始支持,可选:legacy、auto、augmented,默认:auto| -|mergeVirtualHostAttributes|Boolean|合并组件节点外层属性(目前仅支持 style、class 属性),uni-app 3.5.1+ 开始支持| +|mergeVirtualHostAttributes|Boolean|合并组件[虚拟节点](/tutorial/vue-api.html#%E5%85%B6%E4%BB%96%E9%85%8D%E7%BD%AE)外层属性(目前仅支持 style、class 属性),uni-app 3.5.1+ 开始支持| |lazyCodeLoading|String|是否开启代码按需执行。| ### mp-baidu diff --git a/docs/matter.md b/docs/matter.md index f5bbc2bf0d9448036c945ef2685eeaba7ef49d61..b4c103f10675269ca8cab4fd37d6ca4d3d54db60 100644 --- a/docs/matter.md +++ b/docs/matter.md @@ -196,7 +196,7 @@ vue页面在App端的渲染引擎默认是系统webview(不是手机自带浏 * 使用`flex`布局时,直接给自定义组件的父元素设置为`display:flex`不能影响到自定义组件内部的根节点,需要设置当前自定义组件为`display:flex`才可以。 * 在自定义组件内部设置根元素高度为100%,不能撑满自定义组件父元素。需要同时设置当前自定义组件高度为100%才可以。 -支付宝小程序不会插入节点,不存在如上问题。 +支付宝小程序默认启用了[virtualHost](/tutorial/vue-api.html#%E5%85%B6%E4%BB%96%E9%85%8D%E7%BD%AE)配置不会插入节点,一般不存在如上问题。 #### vendor.js 过大的处理方式 diff --git a/docs/tutorial/vue-api.md b/docs/tutorial/vue-api.md index aa82aa1d06b303b43acd4025ab9a0405686cf2a9..2309a46e6e868a05b94f5e7707d301bd0e4d7612 100644 --- a/docs/tutorial/vue-api.md +++ b/docs/tutorial/vue-api.md @@ -193,16 +193,19 @@ Vue 组件编译到小程序平台的时候会编译为对应平台的组件,部分小程序平台支持 options 选项(具体选项参考对应小程序平台文档的自定义组件部分),一般情况默认即可,如有特殊需求可在 Vue 组件中增加 options 属性。 +|属性|类型|默认值|描述|平台兼容性| +|--|--|--|--| +|multipleSlots|Boolean|true|在组件定义时的选项中启动多slot支持|| +|styleIsolation|String|apply-shared|组件样式隔离方式,具体配置选项参见:[组件样式隔离](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB)|微信小程序| +|addGlobalClass|Boolean|true|~~这个选项等价于设置 styleIsolation: apply-shared ,但设置了 styleIsolation 选项后这个选项会失效~~|微信小程序| +|virtualHost|Boolean|false|将自定义节点设置成虚拟的,更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等,而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定,启用后可以通过 [mergeVirtualHostAttributes](/collocation/manifest.html#mp-weixin) 合并合并组件虚拟节点外层属性|微信小程序、支付宝小程序(默认值为 true)| + ```js export default { props: ['data'], data(){ return { } }, options: { - // 微信小程序中 options 选项 - multipleSlots: true, // 在组件定义时的选项中启动多slot支持,默认启用 - styleIsolation: "isolated", // 启动样式隔离。当使用页面自定义组件,希望父组件影响子组件样式时可能需要配置。具体配置选项参见:微信小程序自定义组件的样式 - addGlobalClass: true, // 表示页面样式将影响到自定义组件,但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared - virtualHost: true, // 将自定义节点设置成虚拟的,更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等,而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定 + virtualHost: true } } ``` diff --git a/docs/tutorial/vue3-api.md b/docs/tutorial/vue3-api.md index fb7e4e36baf752781bccc9d4cff3b8154b5a5cf7..ead455f45615b6121327cf65c664fbd411494200 100644 --- a/docs/tutorial/vue3-api.md +++ b/docs/tutorial/vue3-api.md @@ -281,19 +281,22 @@ const app = createApp({}) ## 其他配置 -`Vue` 组件编译到小程序平台的时候会编译为对应平台的组件,部分小程序平台支持 `options` 选项(具体选项参考对应小程序平台文档的自定义组件部分),一般情况默认即可,如有特殊需求可在 `Vue` 组件中增加 `options` 属性。 +Vue 组件编译到小程序平台的时候会编译为对应平台的组件,部分小程序平台支持 options 选项(具体选项参考对应小程序平台文档的自定义组件部分),一般情况默认即可,如有特殊需求可在 Vue 组件中增加 options 属性。 + +|属性|类型|默认值|描述|平台兼容性| +|--|--|--|--| +|multipleSlots|Boolean|true|在组件定义时的选项中启动多slot支持|| +|styleIsolation|String|apply-shared|组件样式隔离方式,具体配置选项参见:[组件样式隔离](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB)|微信小程序| +|addGlobalClass|Boolean|true|~~这个选项等价于设置 styleIsolation: apply-shared ,但设置了 styleIsolation 选项后这个选项会失效~~|微信小程序| +|virtualHost|Boolean|false|将自定义节点设置成虚拟的,更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等,而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定,启用后可以通过 [mergeVirtualHostAttributes](/collocation/manifest.html#mp-weixin) 合并合并组件虚拟节点外层属性|微信小程序、支付宝小程序(默认值为 true)| ```js export default { - props: ['data'], - data(){ return { } }, - options: { - // 微信小程序中 options 选项 - multipleSlots: true, // 在组件定义时的选项中启动多slot支持,默认启用 - styleIsolation: "isolated", // 启动样式隔离。当使用页面自定义组件,希望父组件影响子组件样式时可能需要配置。具体配置选项参见:微信小程序自定义组件的样式 - addGlobalClass: true, // 表示页面样式将影响到自定义组件,但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared - virtualHost: true, // 将自定义节点设置成虚拟的,更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等,而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定 - } + props: ['data'], + data(){ return { } }, + options: { + virtualHost: true + } } ```