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

组件模板

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

模板数据绑定

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

组件的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,}，可以将组件那个标签节点隐藏，只将组件内的节点插入到页面中。