小程序插槽

98 阅读2分钟

插槽

什么是插槽?在生活中很多地方都有插槽,电脑的USB插槽,插板当中的电源插槽。插槽的目的是让我们原来的设备具备更多的扩展性。比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。组件的插槽也是为了让我们封装的组件更加具有扩展性,让使用者可以决定组件内部的一些内容到底展示什么。举个例子,移动网站中的导航栏。移动开发中,几乎每个页面都有导航栏。导航栏我们必然会封装成一个插件,比如nav-bar组件。一旦有了这个组件,我们就可以在多个页面中复用了。

image.png

单个插槽的使用

除了内容和样式可能由外界决定之外,也可能外界想决定显示的方式。比如我们有一个组件定义了头部和尾部,但是中间的内容可能是一段文字,也可能是一张图片,或者是一个进 度条。在不确定外界想插入什么其他组件的前提下,我们可以在组件内预留插槽。

<view>
    <view>header</view>
    <view class="content">
        <slot></slot>
    </view>
    <view>footer</view>
</view>
<my-slot>
    <text>我是本文</text>
</my-slot>
<my-slot>
    <button>哈哈哈</button>
</my-slot>
<my-slot>
    <image src="/assets/xxx.jpg"></image>
</my-slot>

多个插槽的使用

有时候为了让组件更加灵活, 我们需要定义多个插槽。

image.png

image.png

image.png

behaviors

behaviors 是用于组件间代码共享的特性,类似于一些编程语言中的 “mixins”。每个 behavior 可以包含一组属性、数据、生命周期函数和方法;组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用;每个组件可以引用多个 behavior ,behavior 也可以引用其它 behavior。

image.png

image.png