vue 插槽的使用

Posted 2021-09-04 雨的印记

父组件内的代码：

<el-dialog
 :title="editType === \'mobile\' ? \'修改手机号\' : editType === \'room\' ? \'修改居住房间\' : editType === \'card\' ? \'修改门卡\' : editType === \'finger\' ? \'修改指纹\' : \'\'" 
 :visible.sync="dialogVisible"
  v-if="dialogVisible"
  
  :show-close="false">
  <EditRoom ref="editRoom" :editInfo="editInfo" v-if="editType === \'room\'">
    <div slot-scope="editRoomInfo" slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitEditRoom(editRoomInfo)" :loading="editBtnLoading" :disabled="editBtnLoading">立即修改</el-button>
    </div>
  </EditRoom>
</el-dialog>

子组件内的使用：

<div class="permission-open-edit-room" v-loading="pageLoading" element-loading-text="拼命加载中...">
<el-form ref="editRoomForm" :model="form" :rules="formRules" label->
  <el-form-item label="区域名称" prop="region_id">
    <el-select v-model="form.region_id" placeholder="请选择区域名称" filterable @change="regionChange">
      <el-option v-for="item in regionArr" :key="item.region_id" :value="item.region_id" :label="item.region_name"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="楼栋名称" prop="floor_id">
    <el-select v-model="form.floor_id" placeholder="请选择楼栋名称" filterable clearable @change="buildingChange">
      <el-option v-for="item in buildingArr" :key="item.floor_id" :value="item.floor_id" :label="item.floor_name"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="楼层号" prop="layer_id">
    <el-select v-model="form.layer_id" placeholder="请选择楼层号" filterable clearable @change="floorChange">
      <el-option v-for="item in floorArr" :key="item.layer_id" :value="item.layer_id" :label="item.layer_name"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="房间号" prop="room_id">
    <el-select v-model="form.room_id" placeholder="请选择房间号" filterable clearable>
      <el-option v-for="item in roomArr" :key="item.room_id" :value="item.room_id" :label="item.room_name"></el-option>
    </el-select>
  </el-form-item>
</el-form>
<slot name="footer" :data="form"></slot>
</div>