Question

我有一个像这样的BaseModal组件：

<template>
    <div class="base-modal" :class="{open: isOpen}">
        <div class="modal">
            <h2 class="modal-title">
                <slot name="title"></slot>
            </h2>
            <div class="modal-content">
                <slot name="content"></slot>
            </div>
        </div>
    </div>
</template>


<script lang="ts">
    import { Vue, Component } from "vue-property-decorator";

    @Component({})
    export default class BaseModal extends Vue {

        public isOpen: boolean = false;

        // Some methods

    }
</script>

我想创建另一个模式组件，该组件将对此组件进行扩展并将其传递给指定插槽的内容。这是我的位置：

<template>
    // How to give slots content here
</template>


<script lang="ts">
    import BaseModal from "@app/components/BaseModal.vue";
    import { Vue, Prop, Component } from "vue-property-decorator";

    @Component({
        extends: BaseModal,
    })
    export default class OtherDropdown extends Vue {
    }
</script>

扩展程序正常工作，但我不知道如何将内容传递到扩展组件的指定插槽。不必再次编写所有BaseModal模板。

谢谢

我正在使用VueJS 2.6.8

Answer 1

您希望使用像这样的名为插槽的组件：

<template>
  <BaseModal>
    <template v-slot:title>
      Some Title
    </template>

    <template v-slot:content>
      Some content goes here
    </template>
  </BaseModal>
</template>

您可以在此处了解有关命名槽的更多信息：https://vuejs.org/v2/guide/components-slots.html#Named-Slots

希望这会有所帮助！

VueJS使用插槽扩展组件

1 个答案: