使用slot编写弹窗组件

具体slot用法详见http://www.cnblogs.com/keepfool/p/5637834.html

html：

<!--测试弹窗-->
            <dialog-test  v-if="testShow==1">
                    <div class="header-box" slot="header">
                        <h2>提示信息</h2>
                    </div>
                    <div class="body-box" slot="body">
                        <p>我是一个对话框</p>
                        <textarea class="test-content"></textarea>
                    </div>
            </dialog-test>
            <dialog-test  v-else-if="testShow==2">
                    <div class="header-box" slot="header">
                        <h2>2222222222222222</h2>
                    </div>
                    <div class="body-box" slot="body">
                        <p>我是一个对话我是一个对话框我是一个对话框我是一个对话框我是一个对话框框</p>
                    </div>
            </dialog-test>

子组件中：

<script type="text/x-template" id="dialog-test-template">
    <div class="dialog-wrap">
        <div class="mask"></div>
        <div class="dialog-is-distribute">
            <slot name="header"></slot><!--父组件中slot=head的占位符-->
            <slot name="body"></slot><!--父组件中slot=body的占位符-->
        </div>
    </div>
</script>

对比，使用子组件嵌套子组件的形式：

最外层就一个：

<transition name="fade">
    <dialog-box  v-if="addShow" v-on:addeval="hiddenEval()" :title="dialogTitle" :sign="dialogContent" :custwidth="dialogWidth"></dialog-box>
 </transition>

而子组件为：

<script type="text/x-template" id="dialog-box-template">
    <div class="dialog-wrap">
        <div class="mask"></div>
        <div class="dialog-is-distribute" :style="{width:custwidth}">
            <div class="title"><b :class="showIcon"></b>{{title}}<i class="close" v-on:click="closedialog()"></i></div>
            <dialog-add v-on:closedialog="closedialog" v-if="sign=='add'"></dialog-add>
            <dialog-print v-on:closedialog="closedialog" v-else-if="sign=='print'"></dialog-print>
            <dialog-addtab v-on:closedialog="closedialog" v-else-if="sign=='addtab'"></dialog-addtab>
            <dialog-delete v-on:closedialog="closedialog" v-else-if="sign=='delete'"></dialog-delete>
        </div>
    </div>
</script>

然后每一个

dialog-add

dialog-print

dialog-addtab等等都是一个子组件；

转载于:https://www.cnblogs.com/xiaozhumaopao/p/7070431.html