zoukankan      html  css  js  c++  java
  • 插槽问题

    插槽一般是写在子组件的

    为了父组件在引用他的时候,能在里面写东西,插在子组件中

    <template>
      <div class="iip-base-title-bar clearfix">
        <el-breadcrumb
          class="iip-base-title-bar__route"
          separator-class="el-icon-arrow-right"
        >
          <el-breadcrumb-item
            v-for="item in list"
            :key="item.path"
            :to="{path: item.path}"
          >{{item.menuName || item.path}}</el-breadcrumb-item>
        </el-breadcrumb>
    //插槽
        <div class="iip-base-title-bar__custom el-breadcrumb__inner">
          <slot name="custom"/>
        </div>
        <div class="iip-base-title-bar__right">
          <slot name="right"/>
        </div>
      </div>
    </template>

    父组件在使用的时候

          <base-title>
            <span class="title" slot="custom" v-show="!!workOrderId"> > 工单编号:{{workOrderId}}</span>
          </base-title>

    注意

    有时候是两层组件

    父组件------子组件------子子组件

    这样的插槽如果在子子组件的话

    子组件有点特殊,这样引用

    <slot name="子组件插槽名字" slot=“子子组件的插槽名字”></slot>
  • 相关阅读:
    Ubuntu中Nginx的安装与配置
    在Ubuntu中安装Redis
    微博开放平台
    QQ互联 回调地址
    PostgreSQL在Ubuntu上安装指南
    postgresql常用命令
    在Linux下查看环境变量
    vue-04-组件
    vue-03-style与class
    vue-02-安装-指令
  • 原文地址:https://www.cnblogs.com/joer717/p/10919344.html
Copyright © 2011-2022 走看看