小程序子组件引用父组件样式

作者: 革易 | 来源:发表于2019-08-16 19:29 被阅读2次

相关文档链接:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E7%B1%BB

通过文档可知,小程序自定义组件有名为externalClasses的属性,可以以数组字符串的方法引入父组件的样式

示例方法如下:

子组件

/* 组件 custom-component.js */
Component({
  externalClasses: ['my-class']
})
<!-- 组件 custom-component.wxml -->
<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>

父组件

<!-- 页面的 WXML -->
<custom-component my-class="red-text" />
/* 页面的 WXSS */
.red-text {
  color: red;
}
注:此处有个坑点,externalClasses是一个字符串数组,但我再具体应用过程中发现,里面的字符串命名方式对驼峰命名不友好,如上面的“my-class”写成“myClass”,在实际应用中会失效
社区上有相关讨论,感兴趣可以看下externalClasses 支持驼峰命名

相关文章

网友评论

    本文标题:小程序子组件引用父组件样式

    本文链接:https://www.haomeiwen.com/subject/ycaqsctx.html