美文网首页
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

相关文章

  • 插槽

    插槽的基础使用,

  • Python24_魔法方法

    __slot__ 使用__slot__后,不能再动态添加属性 使用__slot__后,每个子类都需要定义__slo...

  • vue插槽

    vue插槽slot的理解与使用 vue slot插槽的使用介绍及总结

  • Vue 小知识点汇总

    插槽slot 如何使用slot的同时传数据(v-slot:name="value") situation: 父页面...

  • vue slot

    vue slot用法1: slot主要是让组件的可扩展性更强 1.匿名slot使用 //定义组件 //使用方法 <...

  • Vue插槽:slot、slot-scope与指令v-slot使用

    不具名插槽 具名插槽 v-slotv-slot在组件中使用slot进行占位时,也是在slot标签内使用name 属...

  • 小程序组件插槽

    匿名插槽 使用时,用 slot 属性来将节点插入到不同的slot上。 实名插槽 使用时,用 slot 属性来将节点...

  • (四)内置组件slot

    本节知识点 slot 使用 概述 slot 是标签的内容扩展,也就是使用slot就可以在自定义组件中传递给组件的内...

  • Vue3.0 组件的核心概念_插槽

    Vue 在 2.6 版本中,对插槽使用 v-slot 新语法,取代了旧语法的 slot 和 slot-scope,...

  • 2019-02-14 vue组件基础篇4

    slot用法 单个slot 具名slot 作用域插槽 父组件中使用了