作用域插槽在Element源码中的体现

一直知道作用域插槽这个知识点，苦于在实际开发中没有碰到对应的场景。

读Element的 form-item源码时，终于见识到了作用域插槽的妙用。

源码解读

1. form-item中如下的源码片段，就是对el-form-item进行字段校验，校验不通过，则会提示错误信息文字。

2. 这边的错误信息用 slot具名插槽包裹起来，并通过:error 作用域向父组件传递了错误信息validateMessage

3. 这样父组件可以拿到错误信息，可以对错误的显示样式进行个性化定制。

<div class="el-form-item__content" :style="contentStyle">
    <slot></slot>
    <transition name="el-zoom-in-top">
        <slot
              v-if="validateState === 'error' && showMessage && form.showMessage"
              name="error"
              :error="validateMessage">
            <div
                 class="el-form-item__error"
                 :class="{
                         'el-form-item__error--inline': typeof inlineMessage === 'boolean'
                         ? inlineMessage
                         : (elForm && elForm.inlineMessage || false)
                         }"
                 >
                {{validateMessage}}
            </div>
        </slot>
    </transition>
</div>

实际使用

平时我们使用el-form-item，需要对参数进行校验并对校验错误信息进行个性化样式时，就可以像下面代码这样写。

比如可以调整错误显示信息的位置，颜色，大小，动画等。。。

<el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
    <template slot="error" slot-scope="slotProps">
        <div
             class="el-form-item__error"
             style="color: pink"
             >
        	自定义错误样式,颜色为pink {{slotProps.error}}
         </div>
    </template>
</el-form-item>

效果：