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

我正在努力学习教程。我使用下面的代码得到了一个

模式

<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>

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

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

使用

从“/modalBody”导入modalBody
导出默认值{
组成部分：{
子组件
},
数据：（）=>（{showmodel:false}）
} 

更新：

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

您更新的代码也有错误

标签

-是一个组件

所以

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>

从“/ModalBody”导入ModalBody；
从“/modal”导入模态；
导出默认值{
组件：{
ModalBody，
情态动词
}
/*组件代码*/
}

重要 如果要在组件中插入另一个组件或元素，则此组件内必须有

另请参见我的示例应用程序：

---

打开'components/setProps/setProps.vue'

childComponent

应该是

modalBody

，也不清楚他们是否建立了切换

showmodel

值的方法……感谢@Volodymyr Synmonenko的回复。你的解决方案不起作用。我更新了我的问题。我想这会对你有所帮助。谢谢@VolodymyrSymonenko的回复。我像你一样写代码，但我在粘贴代码时犯了错误。但不幸的是，您的代码不起作用。即使我尝试使用

，但我没有得到所需的输出。谢谢

<template>
        <modal 
            v-model="showModal" 
            :animation-duration="animationDuration" 
            :close-on-click-away="closeOnClickAway"
            > 
            <modal-body></modal-body>                                         
        </modal>
    </div>
</template>
<script>
    import ModalBody from './ModalBody';
    export default {
        components: { ModalBody },
    }
</script>

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

<script>
import modalBody from './ModalBody'

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

<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>