【微信小程序】- externalClasses

• 作用：父组件修改子组件中的某个元素的样式
• 局限
  • 只能针对一个元素，不能修改元素下的其他子元素（theme方式可以弥补，但需要修改子组件的样式，一般是集中设定好，如small、middle、large几种主题下的元素样式）
  • 如果父组件修改的样式，子组件也设置了，则必须要加!important
• 优势：只要为子元素添加了对应的externalClasses，则多个父组件调用同一个子组件，对应到不同的样式，这样样式都只需要写在父组件中，无需多次修改子组件
• 注意
  • 子元素中写法为external-des-class，但会根据父组件传入的external-des-class的值自动转换成des-class
  • 如果传入的externalClasses需要放在{{}}中跟一些动态值进行运算，则需要用双引号""来括住
• 例子：

<!-- 父组件 html --> 
<view class="user">
  <user-list 
    external-title-class="title-class" 
    external-des-class="des-class" 
    external-unread-class="unread-class"
  </user-list>
</view>

/* 父组件样式 */
.title-class{color:red !important;}
.des-class{font-size: 16rpx !important;}
.unread-class{background: yellow;}

<!-- 子组件 html --> 
<view class="info">
	<view class="title external-title-class">标题</view>
	<view class="des external-des-class">描述</view>
	<view class="des {{item.read ? '': 'external-unread-class'}}">未读</view>
</view>

/* 子组件样式 */
.des{font-size: 14rpx;}

/* 子组件js */
Component({
	externalClasses: ['external-title-class','external-des-class','external-unread-class']
})