美文网首页
slot使用

slot使用

作者: 前端陈陈陈 | 来源:发表于2021-12-07 11:29 被阅读0次
    // 子组件
    <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

    相关文章

      网友评论

          本文标题:slot使用

          本文链接:https://www.haomeiwen.com/subject/dcgoxrtx.html