小程序开发之路uni-app 07

「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」

使用vue3+vite开发uniApp

slot 插槽

引用自定义组件todo-button

<todo-button>
  插槽内容 Add todo 
</todo-button>

组件模板

 <!-- 定义 todo-button的组件模板 -->
<button class="btn-primary">
  <slot></slot>
</button>

渲染时将内容插入到slot部分，渲染后组件内容为

<!-- 渲染 HTML -->
<button class="btn-primary">
  插槽内容 Add todo 
</button>

后备内容

后备内容即默认内容，它只会在没有提供内容的时候被渲染出来。

 <button type="submit">
   <slot>Submit</slot>
</button>

使用时不指定插槽内容将使用默认内容

 <submit-button></submit-button>

具名插槽

在一个组件中需要多个插槽。例如模板的 base-layout 组件

<!-- 自定义base-layout组件 -->
    <view class="container">
        <header>
        <!-- 我们希望把页头放这里header -->
        </header>
        <main>
        <!-- 我们希望把主要内容放这里 main -->
        </main>
        <footer>
        <!-- 我们希望把页脚放这里 footer -->
        </footer>
    </view>

slot有个attribute属性可以定义插槽名称

定义组件

 <view class="container">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </view>

一个不带 name 的 slot 出口会带有隐含的名字“default”

使用v-slot指令指明引用组件的slot

 <template>
        <view>
        <!-- 父组件使用子组件`<base-layout>`，节点上使用v-slot特性： -->
            <base-layout>
                <template v-slot:header>
                    <view>Here might be a page title header</view>
                </template>
                <template v-slot:default>
                    <view>A paragraph for the main content default</view>
                    <view>And another one.</view>
                </template>
                <template v-slot:footer>
                    <view>Here's some contact info footer</view>
                </template>
            </base-layout>
        </view>
    </template>

渲染后html内容

<div class="container">
        <header>
            <div>Here might be a page title header</div>
        </header>
        <main>
            <div>A paragraph for the main content default</div>
            <div>And another one.</div>
        </main>
        <footer>
            <div>Here's some contact info footer</div>
        </footer>
    </div>

跟 v-on 、 v-bind 一样，v-slot 也有缩写，替换为字符 #。例如 v-slot:header 可以被重写为 #header。

<base-layout>
        <template #header>
            <view>Here might be a page title header</view>
        </template>

        <template #default>
            <view>A paragraph for the main content default</view>
            <view>And another one.</view>
        </template>

        <template #footer>
            <view>Here's some contact info footer</view>
        </template>
    </base-layout>

作用域插槽

可以访问父组件中的data，可以通过绑定参数的方式传递数据。

<slot :item="item"></slot>

至此slot插槽完成。