微信小程序组件模板和样式梳理

微信小程序组件模板和样式梳理微信小程序组件模板和样式梳理组件模板组件模板和页面模板写法相同。支持插槽。模板数据绑定父组件通过属性向子组件传递数据。组件的slot插槽插槽用于

大家好,欢迎来到IT知识分享网。

微信小程序组件模板和样式梳理

组件模板

组件模板和页面模板写法相同。支持插槽。

模板数据绑定

父组件通过属性向子组件传递数据。

组件的slot插槽

插槽用于承载父组件提供的 wxml 结构。默认只有一个插槽,可以通过配置 options: { multipleSlots: true } 支持多插槽,使用时,用 slot 属性来将节点插入到不同的 slot 上。。

微信小程序组件模板和样式梳理

组件样式

默认样式只对组件节点生效。只能使用clsss类名选择器。

微信小程序组件模板和样式梳理

组件默认样式根节点使用 :host选择器。

微信小程序组件模板和样式梳理

组件样式隔离

默认情况下组件的样式是隔离的。

可以设置样式隔离选项来指定组件的样式隔离。

options: {

styleIsolation: ‘isolated’

}

选项

isolated:页面和组件的样式不相互影响。

apply-shared:页面样式影响组件样式,组件样式不影响页面样式。

shared:页面和组件的样式相互影响。

这个选项也可以在json文件中配置。

也可以设置addGlobalClass: true选项,这个选项等价于styleIsolation:”apply-shared”。

外部样式类

定义externalClasses这个字段,启用组件接受外部传入的样式类。

微信小程序组件模板和样式梳理

微信小程序组件模板和样式梳理

引用页面或父组件的样式

组件即使定义了隔离,也可以引用父页面的样式。

组件中可以使用 ~ 来引用这个类的样式。

<view class=”~blue-text”> 这段文本是蓝色的 </view>

虚拟化组件节点

组件中设置options: { virtualHost: true,},可以将组件那个标签节点隐藏,只将组件内的节点插入到页面中。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/48264.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信