This is the template part of the Alert component

<template> <transition name="el-alert-fade"> <div class="el-alert el-alert" :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]" v-show="visible" role="alert" > <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i> <div class="el-alert__content"> <span class="el-alert__title" :class="[ isBoldTitle ]"  v-if="title || $slots.title"> <slot name="title">{{ title }}</slot> </span> <p class="el-alert__description" v-if="$slots.default && ! description"><slot></slot></p> <p class="el-alert__description" v-if="description && ! $slots.default">{{ description }}</p> <i class="el-alert__closebtn" :class="{ 'is-customed': closeText ! == '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i> </div> </div> </transition> </template>Copy the code

The interesting part is the description part

<p class="el-alert__description" v-if="$slots.default && ! description"><slot></slot></p> <p class="el-alert__description" v-if="description && ! $slots.default">{{ description }}</p>Copy the code
props:{
  description: {
    type: String,
    default: ''
  }
}
Copy the code

The description section can be passed in props Description or slot, but only one of the methods can be used to output the description

1. Description in Slot Default mode

<el-alert title=" This is the successful title "type="success"> <template> This is the successful description slot</template> </el-alert>Copy the code

2. Use props to transfer parameters

<el-alert title=" this is the title of success" type="success" description=" This is the description of success" />Copy the code