Question

我有一个模态，它有两个default slot和buttons slot插槽，在default slot中，我将设置模态的内容（在这种情况下，我将使用警报），并且在buttons slot中，我将添加一些按钮（在本例中为删除按钮）。

现在，我想创建一个component，其中将包含alert和前面提到的删除button。但是alert将位于模式的default slot中，而button将位于模式的buttons slot中。

如果我像这样在modal组件中使用下面的代码，它将显示带有警告的模式

<modal>
   <template v-slot:default>
      <v-alert type="warning" :value="true">
         ¿Are you sure you want to delete {{ text }}?
      </v-alert>
   </template>
   <template v-slot:buttons>
      <v-btn color="error" @click="clicked">Delete</v-btn>
   </template>
</modal>

现在我想要的是能够像这样在模式内部设置一个组件

     <modal :title="title" :show="show" @close="show = false">
         <modal-elim :text="'delete something'"></modal-elim>
     </modal>

我想这样做，以便将来可以动态更改模态的内容，并重复使用相同的模态布局。

如您所见，modal-elim组件将具有之前显示的alert和button，但是它们必须贴在modal组件的插槽中，试试了

<template>
    <div>
        <template v-slot:default>
            <v-alert type="warning" :value="true">
                ¿Estas seguro que deseas eliminar {{ text }}?
            </v-alert>
        </template>
        <template v-slot:buttons>
            <v-btn color="error" @click="clicked">Enviar</v-btn>
        </template>
    </div>
</template>

<template v-slot> can only appear at the root level inside the receiving the component

当我尝试将元素包装到插槽中时，会抛出错误

有可能在子组件旁边添加父插槽吗？我怎样才能做到这一点？我还能如何解决此问题？

在ModalElim组件中

？我已经尝试过了，但是它抛出了错误。

子组件vue 2.x中的父组件插槽

0 个答案: