1. 实现效果
2.实现原理
在父组件中点击编辑按钮，将当前点击对象的id传给子组件，子组件根据id修改相应的内容
父组件中代码：
//放置编辑按钮的位置
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" v-on:click="edit(manage.id)"><i class="layui-icon"></i>编辑</button>
// 在methods中设计edit()方法
//需要先引入编辑组件
import EditManage from './EditManage'
edit(id){
this.$layer.iframe({
type:2,
title:"编辑",
area:['600px','450px'],
shade:true,
offset:'auto',
content:{
content:EditManage,//传递的编辑组件主线
parent:this,
data:{
info:{id:id}// 传递的要编辑内容的id值
}
}
})
},子组件EditManage代码
<template>
<div class="editmanage container">
<form class="form" v-on:submit="editManage">
<div class="form-group">
<label>账号</label>
<input type="text" required placeholder="账号" autocomplete="off" class="form-control" v-model="manage.account">
</div>
<div class="form-group">
<label>用户名</label>
<input type="text" required placeholder="用户名" autocomplete="off" class="form-control" v-model="manage.username">
</div>
<div class="form-group">
<label >密码</label>
<input type="password" required placeholder="密码" autocomplete="off" class="form-control" v-model="manage.password">
</div> <div class="form-group">
<label >权限</label>
<select name="authority" class="form-control" v-model="manage.authority">
<option value="超级管理员" >超级管理员</option>
<option value="普通管理员" >普通管理员</option>
</select>
</div>
<button type="submit" class="btn btn-info">立即提交</button>
</form>
</div>
</template>
<script>
export default {
name: 'addmanage',
data () {
return {
manage:{},
form:{}
}
},
props:{
//接收父组件传来的id值
info:{
type:Object,
default:()=>{
return {}
}
},
layerid:{
type:String,
default:""
},
lydata:{
type:Object,
default:()=>{
return {}
}
}
},
methods:{
