Question

我正在尝试关注this教程。我使用下面的代码获得Modal。

<modal 
    v-model="showModal" 
    :animation-duration="animationDuration" 
    :close-on-click-away="closeOnClickAway"
    >

    <p slot="header">Confirmation needed</p>

    <p slot="content">Do you want to continue?</p>

    <template slot="actions">
        <div class="ui black deny button" 
            @click="showModal=false">
            No
        </div>
        <div class="ui positive right labeled icon button" 
            @click="confirm">
            Yes
            <i class="checkmark icon"></i>
        </div>
    </template>
</modal>

在这里，我想将代码的下方部分放在另一个名为.vue的{{1}}文件中。

ModalBody.vue

然后我尝试访问该文件，如下所示

<p slot="header">Confirmation needed</p>

<p slot="content">Do you want to continue?</p>

<template slot="actions">
    <div class="ui black deny button" 
        @click="showModal=false">
        No
    </div>
    <div class="ui positive right labeled icon button" 
        @click="confirm">
        Yes
        <i class="checkmark icon"></i>
    </div>
</template>

但它不起作用。即使我在控制台中没有收到任何错误。

更新

<modal v-model="showModal" :animation-duration="animationDuration" :close-on-click-away="closeOnClickAway" > <modal-body></modal-body> </modal>

Parent.vue

Answer 1

使用import

<template>
   <!-- html code -->
   <modal-body v-show="showModal"></modal-body>                                         
</template>

<script>
import modalBody from './ModalBody'

export default {
    components: {
       childComponent
    },
    data: () => ({ showModal: false })
} 
</script>

<强>更新

我犯了错误，但是你注意到了她。

您的更新代码也有错误

tag </div>
<modal> - 是一个组件

所以

Parent.vue

<template>
    <modal 
        v-model="showModal" 
        :animation-duration="animationDuration" 
        :close-on-click-away="closeOnClickAway"
        > 
        <modal-body></modal-body>                                         
    </modal>
</template>

<script>
import ModalBody from './ModalBody';
import modal from './modal';

export default {
    components: { 
        ModalBody,
        modal 
    }
/* component code */
}
</script>

重要！ 如果要在组件中插入另一个组件或元素，则在此组件内必须有<slot></slot> 。 see

另见我的示例应用：https://codesandbox.io/s/3xyx386q65

打开＆＃39; 组件/ setProps / setProps.vue ＆＃39;

将模板从.vue文件传递到另一个.vue文件

1 个答案: