vue+element ui实现的。解释大多在代码中（代码臭且长，有错误请指正）--
代码如下：
<template> <div class="userList"> <el-table :data="list" border style="width: 60%;"> <el-table-column type="selection" width="60"/> <el-table-column prop="userName" label="人物" width="300"/> <el-table-column prop="sect" label="教派" width="300"/> <el-table-column prop="kongfu" label="所修功法" width="300"/> <el-table-column label="操作" width="300"> <template> <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button> <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button> </template> </el-table-column> </el-table> <el-dialog title="用户列表" :visible.sync="dialogFormVisible" width="30%" center> 弹窗组件，props传值最重要的就是在这里绑定:form="list"--这里的list是点击编辑，获取到的当前行的数据。 form则是子组件那边接受定义的数据，子组件props中可看到。 run是传过去的函数。子组件通过$emit溜过来触发,也就是子组件中this.$emit('close','') 来触发父组件中定义的事件,close就是触发@close="cancel()"，@change相同 <popup :form="list" :run="run" @close="cancel()" @change="sub()"/> </el-dialog> </div> </template> <script> import popup from './popup.vue'; export default { components: { popup }, data() { return { dialogFormVisible: false, form: { userName: '', sect: '', kongfu: '', }, list: [ { userName: '周芷若', userId: '1', sect: '峨眉', kongfu: '九阴白骨爪' }, { userName: '张无忌', userId: '2', sect: '明教', kongfu: '乾坤大挪移' }, { userName: '赵敏', userId: '3', sect: '朝廷', kongfu: '有人' }, { userName: '张三丰', userId: '4', sect: '武当', kongfu: '太极' } ], }; }, created() { }, methods: { //编辑 handleEdit(row) { this.list = Object.assign({},row) this.dialogFormVisible = true }, //提交 sub(data) { this.cancel() }, //取消 cancel() { this.dialogFormVisible = false }, //删除 handleDelete(row) { this.list.splice(row,1) }, //测试props传递函数玩的 run() { alert('儿子那边打开他爹这边的') }, } }; </script>
用户列表为element中dialog对话框，这个demo主要实现的就是父组件传值到子组件也就是传到这些个输入框中。
<template> <div class="popup"> <el-form :data="form" ref="form" label-width="30%"> <el-form-item label="人物" prop="userName"> <el-input v-model="form.userName" placeholder="用户名称"/> </el-form-item> <el-form-item label="教派" prop="sect"> <el-input v-model="form.sect" placeholder="教派"/> </el-form-item> <el-form-item label="所修功法" prop="kongfu"> <el-input v-model="form.kongfu" placeholder="所修功法"/> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancel()">取消</el-button> <el-button type="primary" @click="sub()">提交</el-button> </div> </div> </template> <script> export default { name: "popup", 接收父组件传过来数据和函数 props: { form:{ type:Object, dafaule : { userName:'', sect: '', kongfu: '', } }, run:{ Function } }, data() { return { } }, methods: { //取消 cancel() { this.$emit('close',''); 点击取消触发父组件传过来的事件run，弹出下面的图 this.run() }, //提交 sub() {this.$emit('change', '') }, } } </script>
至此小demo就完成了。
有不足，请指正。
来源：博客园
作者：印第安小铁匠
链接：https://www.cnblogs.com/yangisme/p/11641115.html