透传属性

        透传属性指组件在使用的时候，作用在组件上的属性，会被向下流动，绑定到组件内的标签中。 

        可以透传的属性：style，class，id，属性，事件

        当一个组件有多个根标签节点时，那么这个组件就不会有自动透传绑定属性行为

        所以如果想利用组件的透传，就必须保证组件内部只有一个根标签 

问题：在实验室项目pc端中想利用 v-hasPermi 为导入按钮增加权限，但发现加了权限之后并未生效，导入组件(SyImport) 代码如下：

    <el-button type="primary" @click="handleUpload">{{ props.label }}</el-button><el-dialogv-model="uploadDialogVisible"title="导入"width="40%"align-center:close-on-click-modal="false":before-close="uploadDialogClose"><div class="content-wrap"><div class="main-wrap"><div class="msg-wrap"><div v-if="props.explain" class="explain-wrap">导入说明:<div class="explain-text">{{ props.explain }}</div></div><div v-if="props.template.url" class="download-wrap" @click="getExcelTemplate">点击下载导入模板</div></div><div class="upload-wrap" :class="{ 'drag-wrap': !props.drag }"><el-uploadref="uploadRef":accept="props.accept":drag="props.drag":http-request="requestUpload":auto-upload="false":multiple="props.multiple":limit="props.limit":on-exceed="handleExceed"><el-icon class="el-icon--upload"><UploadFilled /></el-icon><div class="el-upload__text"><span v-if="props.drag">拖拽文件到此 或者 </span><em>点击此处上传</em></div><template #tip><div class="el-upload__tip">请选择导入文件</div></template></el-upload></div></div><div class="footer-wrap"><el-button type="primary" :loading="submitLoading" @click="submitUpload">确认导入</el-button></div></div></el-dialog>

由此可看出：组件内部有多个根标签，Vue 不知道为哪个标签绑定透传属性，所以v-hasPermi不会生效。

修改：在组件内部添加一个根标签，将这两个标签都放在根标签里，由此问题解决。