Question

我有一个组件'ProgressCircular.vue'。我需要在另一个组件中调用此组件，而我的上级告诉我要使用插槽名称。

请帮帮我。添加进度圆形组件：

<template>
<div>
<v-overlay :value="true">
  <v-row justify="center" align="center">
    <div class="text-center ma-12">
      <v-progress-circular
        
        :rotate="rotate"
        :size="size"
        :value="value"
        :width="width"
        color="red"
      indeterminate ></v-progress-circular>
    </div>
  </v-row>
</v-overlay>
</div>
</template>
<style scoped>
</style>
<script>
  export default {
    data: () => ({
      indeterminate: true,
      rotate: 0,
      size: 50,
      value: 0,
      width: 1
    }),
  }
</script>

验证链接：https://v15.vuetifyjs.com/en/components/progress

我需要集成progresscircular的组件如下： DocumentComponent

<template>
    <div class="components" :key="documentComponentkey">
        <!--Document Version History Component-->
        <DocumentHistoryComponents></DocumentHistoryComponents>
        <!--Generic Header Component-->
        <HeaderComponents></HeaderComponents>
        <div class="components-sub-container">                         
            <!--Generic Form Component-->
            <BodyComponents></BodyComponents>
        </div>
        <!--Generic Footer Component-->
        <FooterComponents></FooterComponents>
    </div>
</template>

我需要使用循环进度组件中的slot属性在DocumentComponent中调用循环进度组件

尝试过： 我修改了如下代码：

<template #circularProgress>
<div>
    <v-flex xs10 class="mx-auto progressbar">
        <v-progress-circular  :rotate="rotate || 360"
                             :size="size || 100"
                             :width="width || 7"
                             color="#557fb5"
                             :value="value || 0"
                             indeterminate v-html="value || 0">
        </v-progress-circular>
    </v-flex>
</div>

和我的孩子部分为：

 <slot :value = 'uploadPercentage' :rotate="360" :size="100">{{uploadPercentage}}</slot>

我得到的是uploadPercentage而不是圆形进度条

VueJs-使用插槽名称调用另一个组件中的组件

0 个答案: