Question

我有两个组成部分

导航
警报

警报是导航的孩子

导航代码

<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>

基本警报代码

<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>

目前这就是我所得到的

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

致谢

Answer 1

您需要添加<template slot="text">{{ error }}</template>，如下所示。文字是您在基本警报中提到的广告位的名称

导航代码

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


<script>
import baseAlert from "./base-alert";
export default {
   components: { baseAlert },
   data() {
     return {
       error: "This is error"
     }
   }
 }
</script>

基本警报

<template>
  <div>
    <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>
  </div>
</template>

<script>
export default {
  name: "base-alert",
  props: ["icon"]
};
</script>

<style scoped></style>

Answer 2

将错误信息作为道具传递给孩子。

导航代码

<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="error" class="alert-inner--text">
      <div>{{ error }}</div>
    </span>
 </slot>

如何将数据传递到子组件中的$ slots？

2 个答案: