小程序之插槽和外部样式

发表于 | 分类于 | 评论数： | 阅读次数：
本文字数： 592 | 阅读时长 ≈ 1 分钟

😷

在小程序中使用插槽

  • 小程序中使用插槽和vue等大同小异，不过需要在component里声明

    1
    2
    3
    options: {
      multipleSlots: true
    }

  • 不管是几个插槽都需要声明否则插槽不起作用

  • 组件中

    1
    <slot name="num"></slot>

  • 页面中

    1
    2
    3
    <w-tag>
        <text slot="num">slot</text>
    </w-tag>

小程序中的外部样式

  • 在封装组件的时候我们希望能够让使用组件的人能够自行修改样式，通过像传值的方式，在小程序中可以通过在component里声明

    1
    externalClasses: ['ex-tag1','ex-tag2']

  • 组件中

    1
    2
    3
    4
    <view class="container ex-tag1">
      <text>{{text}}</text>
      <slot name="num"></slot>
    </view>

  • 页面中,在页面中定义样式覆盖即可

    1
    <w-tag ex-tag1="ex-tag1" />>
求打赏