VUE组件内部插入方法＜slot＞＜/slot＞

        在外部父组件中，对子组件中插入内容，按照指定位置进行操作。

        由于组件中，内容存在的是组件内关闭弹窗，因此，想要修改这个弹窗开启的按钮就必须要修改组件内的布局。

<template>
	<view>
		<!-- 组件内关闭 --> 
		<view @click="popBtn()" class="text-jichu">查看已选门店</view>
		<!--  -->
		<!-- 遮罩层 -->
		<view class="mask" v-show="tag == true || Uptag == true" @click="close()"></view>
		<!-- 插槽 -->
		<view >
</template>

        上述代码就是组件内代码，弹窗的操作和关闭的按钮都是在组件内实现的，在父组件中展示出来就是固定的一个部分，无法移动，无法修改。

                

上述的图片就是这个直接导入的组件，其中的哪些位置都是固定好的

                

上述图片是经过调整过后的代码，如果只是在父组件中插入的子组件，然后再子组件中添加方法，那么其格式就无法并排实现。

<slot></slot>插槽的使用方式

想要修改格式，排版，就最好是在子组件中进行格式排版，然后预留下父组件中添加的方法位置。

<template>
	<view>
		<!-- 组件内关闭 --> 
		<!--  -->
		<!-- 遮罩层 -->
		<view class="mask" v-show="tag == true || Uptag == true" @click="close()"></view>
		<!-- 插槽 -->
		<view >
			<view class="item-line"></view>
			<view class="state-box2">
				<slot>
					<!-- 这里存放的是多选按钮 --> 全选按钮
				</slot>
				<view class="state-box2">
					<view>
						<view @click="popBtn()" class="text-jichu">查看已选门店
							<slot name="pop"></slot>
						</view>
					</view>
					<view>
						<slot name="btn" ></slot>
					</view>
				</view>
			</view>
		
		</view>

父组件中 switchEdit 就是这个子组件

<switchEdit 
    :direction="direction" 
    @close1="Close1" 
    :Uptag="Uptag"
    :lists="checkedList" 
    :key="checkedList" 
    :bodyBtn="true" 
    class="uni-card"
    v-on:update:lists="handleListsChange"
    >
    <view slot="pop">
        <view >
            <view class="text-jichu1" >
                已选择{{checkedList.length}}家
                </view>
            </view>
        </view>
        <view slot="btn">                        
            <button class="text-jichu" style="background-color: rgb(44, 146, 230);" @click="showScreeningConditions1" >制定计划
            </button>
        </view>
        <!-- 插槽 -->
</switchEdit>

最终的结果如下所示