大家好,欢迎来到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