slot使用

// 子组件
<template>
  <div v-if="isShow">
    <!-- 弹出层 -->
    <div class="protocol_layer show">
      <div class="protocol_lytit">
        <h3>{{ title }}</h3>
        <a class="close" title="关闭" @click="_onHide"></a>
      </div>
      <div class="protocol_lycont">
        <div class="protocol_content">
          <slot></slot>
        </div>
      </div>
      <div class="protocol_lybtn">
// 这里需要加几个按钮,用slot 
        <slot name="nextStep"></slot>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="dialog_overlay" v-if="mask" @click="_onHide"></div>
  </div>
</template>
//父组件
    <popup
      v-model="protocol.show"
      :title="protocol.econtract_name"
      @onSure="protocol.onSureFunc"
    >
//  父组件使用插槽nextStep
      <template #nextStep>
        <div class="protocol_lybtn">
          <a>上一步</a>
          <a>下一步</a>
        </div>
      </template>
      <div v-html="protocol.econtract_content"></div>
    </popup>
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容