1. 實現效果

2.實現原理

在父組件中點擊編輯按鈕，將當前點擊對象的id傳給子組件，子組件根據id修改相應的內容

父組件中代碼：

//放置編輯按鈕的位置<button type='button' v-on:click='edit(manage.id)'><i class='layui-icon'>&#xe642;</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 v-on:submit='editManage'> <div class='form-group'> <label>賬號</label> <input type='text' required placeholder='賬號' autocomplete='off' v-model='manage.account'> </div> <div class='form-group'> <label>用戶名</label> <input type='text' required placeholder='用戶名' autocomplete='off' v-model='manage.username'> </div> <div class='form-group'> <label >密碼</label> <input type='password' required placeholder='密碼' autocomplete='off' v-model='manage.password'> </div> <div class='form-group'> <label >權限</label> <select name='authority' 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:{ //用來顯示對應id的編輯內容，在created中調用 fetchManage(id){ this.$http.get(’http://localhost:3000/manage/’+id) .then(function (response) { this.manage=response.body; }) }, editManage(e){ if(!this.manage.account||!this.manage.username||!this.manage.password||!this.manage.authority){ this.$layer.msg('請添加對應信息！') }else{ let updateManage={ account:this.manage.account, username:this.manage.username, password:this.manage.password, authority:this.manage.authority }; this.$http.put('http://localhost:3000/manage/'+this.info.id,updateManage) .then(function (response) { //關閉父組件中的編輯彈框 this.$layer.close(this.layerid); //彈出提示信息，默認時間為3秒 this.$layer.msg('修改管理員信息成功！'); }); e.preventDefault() } e.preventDefault() } }, created(){ // this.info.id父組件傳給子組件的id值 this.fetchManage(this.info.id); } }</script><style scoped> .editmanage{ margin:8px 20px 20px 20px; }</style>

到此這篇關于Vue項目結合Vue-layer實現彈框式編輯功能(實例代碼)的文章就介紹到這了,更多相關Vue彈框式編輯內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！