插槽一般是写在子组件的
为了父组件在引用他的时候,能在里面写东西,插在子组件中
<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>