如何渲染一个组件的内容，该组件通过槽渲染另一个组件

Question

如下面发布的代码所示，组件

ButtonDigitizePolygon.vue

包含一个名为

button

的

slot

。组件

NDVIComparisonGui.vue

渲染

ButtonDigitizePolygon.vue

。 我希望

App.vue

渲染

NDVIComparisonGui.vue

，因此也渲染

ButtonDigitizePolygon.vue

。

以下是我的尝试。当我运行代码时，我只看到

<img>

的内容，但按钮从未呈现。

请告诉我按钮未渲染的原因以及解决方法。

App.vue：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <NDVIComparisonGui></NDVIComparisonGui>
</template>

<script>
import NDVIComparisonGui from './components/NDVIComparisonGui.vue'

export default {
  name: 'App',
  components: {
    NDVIComparisonGui
  }
}
</script>

NDVIComparisonGui.vue：

<template>
    <ButtonDigitizePolygon @click="onDigitizePolygon()" :isBtnDigitizePolygonDisabled="isBtnDigitizePolygonDisabled">
        <template v-slot:slotDigitizePolygonBtnLabel>
            {{ compPropsIsToggleBtnDigitizePolygon }}
        </template>
</ButtonDigitizePolygon>
</template>

<script>
import { ref } from 'vue';
import { ButtonDigitizePolygon } from './ButtonDigitizePolygon.vue';

let isBtnDigitizePolygonDisabled = ref(false);

export default {
    name: 'NDVIComparisonGui',
    date() {
        return {
            isBtnDigitizePolygonDisabled,
        };
    },
    components: {
        ButtonDigitizePolygon,
    },
    props: {
    },
};
</script>

ButtonDigitizePolygon.vue：

<template>
<button id="idDigitizePolygonBtn" class="clsDigitizePolygonBtn" :disabled="isBtnDigitizePolygonDisabled">
    <slot name="slotDigitizePolygonBtnLabel"></slot>
</button>
</template>

<script>
export default {
    date() {
        return {
            btnDigitizePolyhonState: this.isBtnDigitizePolygonDisabled,
        };
    },
    props: {
        isBtnDigitizePolygonDisabled: {
            type: Boolean,
            default: false,
        },
    },
};
</script>

Answer 1

您的 NDVIComparisonGui.vue 有两个错误：

1. import { ButtonDigitizePolygon }

   应该是

   import ButtonDigitizePolygon

2. 是

   data(){  }

   而不是

   date(){}

如果您只是将组件复制到 Vue SFC Playground，所有错误都将在那里： https://play.vuejs.org/#eNqdVE1v2zAM/SuCLmmAzjn05rnFlqUYMgxdsBY96eLYjKNWlgxJztIF+e+j5I85set1JYIkJvmoR+rRB/q5KIJdCTSkkYW8EL GFGyYJiXiekVjYa0YfSyBCZYrRKnK3eFx+UXkRa26U/Frym2jW9zEZzToV8dEkmhcW//O8UNqSHoZstMrJJOhXcxQnrgjsPTSFTVwKSw6OkIxzCMkEO5lcuucEkUqCtCasEkj /KOc+MomfaFbzopfUmkTJDc+CJ8zCkXg0o64gF6B/FJYraRht6zIaC6F+ffM+q0vwBDxmC8nzgP/J7J2P0ZUGA3oHjLYxG+sMbBW+vb+DPf5vg7lKS4HZI8GfYJQoHccqbV7KFG l38jzbpR8/l9mDud1bkKZpyhH1g/H5jOLQ3dBea/0v3avgqhkoTnHw9noCQyHNS2uVXPCMW/4bVkq8ZEqST4ngyTPqrhe6mDJKQm7m9jyy4CZeC0gRNRauFVxZS4fsPhihbOi+zoBY6nu8BtGBOT scvMhWWWhVmaR5Ulgnon0qOOJD2tO4yRLPB1t+wMweiYUOO9aa4rfjYiQ0PtMkOhk/1u4VVmBRgydj4yLU7/WITCwNTjxhax3Yhezqo1pOQFNu7mDbZzjTYUsuux9kYl7qUsyNS8b+1b2D/nQ02X0Maa OFutEU5ryvefUW8OsIzgUdrn0i412Ta1xVKORGxMRhOhBmMh+l/yjpyEvbjR8SInBGAPWHCK65iOia+4Wt+6zWuT4lvlby3CMX3zZab4J2XfHpT/1LLSAIz +1IggblSAuJGBI3VbYbEC73LoaOWU10c/wAxAnaP