微信小程序组件模板和样式梳理
组件模板
组件模板和页面模板写法相同。支持插槽。
模板数据绑定
父组件通过属性向子组件传递数据。
组件的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,}，可以将组件那个标签节点隐藏，只将组件内的节点插入到页面中。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。