使用<template slot="error" slot-scope="{ error }">自定义错误提示

在Vue.js中，`<template>`标签配合`slot`属性用于内容分发，特别适用于组件化开发。当你想在某个组件内部根据条件显示特定的子组件或内容片段，可以使用`slot`。`slot="error"`定义了一个名为`error`的插槽，而`slot-scope="{ error }"`则是给这个插槽提供一个作用域，其中`error`是一个数据属性，通常会包含需要展示的错误信息。

当你在父组件中使用这个带有自定义错误提示的子组件时，可以通过传递错误对象到这个插槽来动态显示错误信息，例如：

<!-- 父组件 -->
<my-component v-if="showError">
  <template slot="error">
    <span>{{ error.message }}</span>
  </template>
</my-component>

<script>
export default {
  data() {
    return {
      showError: false,
      error: { message: '这是一个错误' },
    };
  },
};
</script>

在上述代码中，如果`showError`为真并且`error`对象存在，那么子组件内的`error`插槽将会渲染出错误消息。