插槽slot应用实例，uni-app插槽的应用，组件封装

组件

<template>
  <div class="mask" v-if="visible" @click="$emit('update:visible',false)">
    <view class="warpper" @click.stop="">
      <slot></slot>
      <button class="adv-btn" @click="submit(),$emit('update:visible',false)">
        <image src="http://ttmini.oss-cn-shenzhen.aliyuncs.com/static_npm/player.png" mode="widthFix" />
        <text>立即观看</text>
      </button>
    </view>
  </div>
</template>

<script>
import {throttle} from "../common/utils"
export default {
  name: 'AdvModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() { 
    return {

    }
  },
  created() { 
  },
  methods: { 
    submit:throttle(function(){
      this.$emit('success')
    },500)
  }
 }
</script>

<style lang="scss" scoped>
.mask{
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
  animation: fade-in 300ms linear;
  z-index: 30;
}
@keyframes fade-in{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
.warpper{
  width: 620rpx;
  background-color: #ffffff;
  padding: 60rpx 0 50rpx;
  font-size:34rpx;
  color: #333;
  margin: 25vh auto 0;
  text-align: center;
  border-radius: 20rpx;
}
.adv-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-color:#FA5B4E;
  width: 410rpx;
  margin:60rpx auto 0;
  border-radius: 50rpx;
  letter-spacing: 6rpx;
  image{
    width:40rpx;
    height: 40rpx;
    margin-right: 20rpx;
  }
}
</style>

组件引用

<template>
 <advmodeal :visible.sync="advtips" @success="adunlock">
      <view>插槽内容</view>
    </advmodeal>
</template>
<script>
import advmodeal from "../../components/adv-modal";
components: {
    advmodeal,
  },
</script>