微信小程序自定义组件添加外部样式类且能修改子组件其它样式

1. 在子组件中定义开放的外部样式

wxml文件：

<!-- price-class为暴露在外的可定义样式-->
<view class="price price-class">
  <view class="hasPrice" wx:if="{{!isFree}}">
    <view class="price-now out-price-now">
      <text class="price-type">￥</text>
      <text class="price-num">59.9</text>
    </view>
    <view class="price-old out-price-old">
      <text class="price-type">￥</text>
      <text class="price-num">89</text>
    </view>
    <view class="price-explain" wx:if="{{saleType}}">{{saleType}}</view>
  </view>
  <view class="free" wx:else>免费</view>
  
</view>

js文件：

// 外部样式
  externalClasses:["price-class"],
  options: {
    addGlobalClass: true, //重点
  },

2. 父组件 
wxml文件

<price_label price-class="out-price" ></price_label>

 如果父级是组件，则需要定义js文件；如果不是组件，则不需要定义

Component({
  options: {
    styleIsolation: 'shared' //重点
  },
 })

发表内容仅本人学习自用