Vue.js 如何将数据传递到子组件中的$slot？

我有两个部分

航行 警觉的 警报是导航的子项

导航码

<template>
   <div class="col-lg-5">
      <base-alert :icon="`fa fa-facebook`"></base-alert>
  </div>
</template>

<script>
export default {
   data() {
     return {
        error: 'This is error'
     }
   }
}
</script>

<template>
   <div class="col-lg-5">
      <base-alert :error="error" :icon="`fa fa-facebook`"></base-alert>
  </div>
</template>

<script>
export default {
   data() {
     return {
        error: 'This is error'
     }
   }
}
</script>

基本警报代码

<slot>
    <span v-if="icon" class="alert-inner--icon">
      <i :class="icon"></i>
    </span>
    <span v-if="$slots.text" class="alert-inner--text">
      <slot name="text"></slot>
    </span>
 </slot>

<slot>
    <span v-if="icon" class="alert-inner--icon">
      <i :class="icon"></i>
    </span>
    <span v-if="error" class="alert-inner--text">
      <div>{{ error }}</div>
    </span>
 </slot>

现在这就是我得到的

我现在的问题是如何将错误数据传递到基本警报$slots.text

---

将您的错误消息作为道具传递给孩子

导航码

<template>
   <div class="col-lg-5">
      <base-alert :icon="`fa fa-facebook`"></base-alert>
  </div>
</template>

<script>
export default {
   data() {
     return {
        error: 'This is error'
     }
   }
}
</script>

<template>
   <div class="col-lg-5">
      <base-alert :error="error" :icon="`fa fa-facebook`"></base-alert>
  </div>
</template>

<script>
export default {
   data() {
     return {
        error: 'This is error'
     }
   }
}
</script>

基本警报代码

<slot>
    <span v-if="icon" class="alert-inner--icon">
      <i :class="icon"></i>
    </span>
    <span v-if="$slots.text" class="alert-inner--text">
      <slot name="text"></slot>
    </span>
 </slot>

<slot>
    <span v-if="icon" class="alert-inner--icon">
      <i :class="icon"></i>
    </span>
    <span v-if="error" class="alert-inner--text">
      <div>{{ error }}</div>
    </span>
 </slot>

您需要添加{{error}}，如下所示。其中text是您在基本警报中提到的插槽名称

导航码 基地警报

---

非常感谢你的帮助