插槽（slot）用法

（具名插槽）

示例：

子组件：

<template>
  <div>
<!--    <slot name="tipsMessage"></slot>-->
    <div class="fixed-bottom shadow w100 box flex-row items-center content-between fit-app bg-fff" style="z-index:10">
      <slot name="leftBtn"></slot>
      <slot name="rightBtn"></slot>
    </div>
    <p class="h170"></p>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.h170{
    height: 170px;
}
.fixed-bottom{
    border-radius: 44px 44px 0px 0px;
    padding: 40px 40px;
    .br-2A2B2B{
        border: 2px solid #2A2B2B;
    }
}
.fit-app {
  padding-bottom: calc(44px + constant(safe-area-inset-bottom));
  padding-bottom: calc(44px + env(safe-area-inset-bottom));
}
</style>

父组件：

 1.引入组件

 2.可以用任意容器标签，只要标签内加上 slot="子组件的对应位置的名字"即可显示在对应位置上