Element-ui+Vue脚手架实现对话框（子父传值）

1. 编写子窗口
2. 父窗口引用子窗口，实现点击弹出子窗口
3. 编写父窗口需要传的值
4. 子窗口编写需要修改的数据

1.编写子窗口

说明：
1.props:{}是个节点值，因为我们在父窗口需要用到它，里面的值相当于一个变量，当父窗口引用时进行赋值
name:'Add’是一个标签的名字,需要在父窗口引用，推荐在父窗口的import的名称一致
3.this.$emit(‘update:dialogTableVisible’, false);是一个返回值的更新，在节点上必须要一致

<template>
	<div>
		<div hidden="hidden">
			<input type="text" v-model="book.id" />
		</div>
		<div>
			书名：
			<el-input v-model='book.bookname' />
		</div>
		<div>
			作者名：
			<el-input type="text" v-model='book.author' />
		</div>
		<div>
			ISBN：
			<el-input type="text" v-model="book.ISBN" />
		</div>
		<div>
			价格：
			<el-input type="text" v-model="book.money" />
		</div>
		<el-row>
			<el-button type="success" @click="save">保存</el-button>
			<el-button type="infor" @click="closeDialog">取消</el-button>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: 'Add', //这个LoginName最好和引入的vue的LoginName相同
		props: {
			itemData: {
				type: Object,
				default: () => {}
			},
			dialogTableVisible: {
				type: Boolean,
				default: false
			},

		},
		data() {
			const book = {};
			return {
				book
			};
		},
		methods: {
			save() {
				this.$axios.post('http://localhost:8080/tangxiang_war/save', {
					id: this.book.id,
					ISBN: this.book.ISBN,
					bookname: this.book.bookname,
					author: this.book.author,
					money: this.book.money
				});
				this.$emit('update:dialogTableVisible', false);

			},
			closeDialog() {
				this.book = [];
				this.$emit('update:dialogTableVisible', false);
			}
		},
		mounted() {
			this.book = this.$props.itemData;
		}
	};
</script>

<style>
</style>

2.父窗口引用子窗口，实现点击弹出子窗口

说明：
1.引入子窗口的vue文件，并且命名为App,例如：import Add from ‘./dialogtable.vue’;（记得在conpents下写入App）
2.父窗口编写引用代码，如下：

<div v-if="dialogTableVisible">
			<el-dialog title="修改书籍信息" :visible.sync="dialogTableVisible" center width="20%" @close="close()">
				<Add :itemData="itemData" :dialogTableVisible.sync='dialogTableVisible'></Add>
			</el-dialog>
</div>

3.获取数据进行一个传值，可以先写一个变量itemData进行获取，当点击按钮时，首先将获取所点击的数据用：scope.row，然后将dialogTableVisible设置成true,在将itemData进行一个赋值，和所获取的列数据一致，然后在标签上用你在子窗口首先编写好的进行一个赋值，这样就可以了

完整代码如下：

<template>
	<div>
		<i class="el-icon-circle-plus" @click="add" style="right: 0px;"></i>
		<el-table :data="tableData" stripe style="width: 100%">
			<el-table-column prop="bookname" label="书名" width="180">
			</el-table-column>
			<el-table-column prop="author" label="作者" width="180">
			</el-table-column>
			<el-table-column prop="ISBN" label="ISBN" width="180">
			</el-table-column>
			<el-table-column prop="money" label="价格">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="open(scope.$index,scope.row)" type="text" size="small">删除</el-button>
					<el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div v-if="dialogTableVisible">
			<el-dialog title="修改书籍信息" :visible.sync="dialogTableVisible" center width="20%" @close="close()">
				<Add :itemData="itemData" :dialogTableVisible.sync='dialogTableVisible'></Add>
			</el-dialog>
		</div>
		<div v-if="dialogVisible">
			<el-dialog title="添加书籍信息" :visible.sync="dialogVisible" center width="20%" @close="close()">
				<addbook :allitemData="tableData" :dialogVisible.sync='dialogVisible'></addbook>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import Add from './dialogtable.vue';
	import addbook from './addbook.vue';
	export default {
		name: 'HelloWorld',
		components: {
			Add,
			addbook
		},
		data() {
			const tableData = [];
			const dialogTableVisible = false;
			const itemData = {};
			const dialogVisible=false;
			return {
				tableData,
				dialogTableVisible,
				itemData,
				dialogVisible,
			};
		},
		methods: {
			add(){
				this.dialogVisible=true;
				console.log(this.tableData);
			},
			getList() {
				this.$axios({
					method: 'post',
					url: 'http://localhost:8080/tangxiang_war/find_allbook',
				}).then((response) => { //这里使用了ES6的语法
					console.log(response); //请求成功返回的数据
					this.tableData = response.data;
				}).catch((error) => {
						console.log(error);
					} //请求失败返回的数据
				);
			},
			edit(val) {
				this.dialogTableVisible = true;
				this.itemData = val;
			},
			open($index, val) {
				var that = this;
				this.$confirm('此操作将永久删除该书籍信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					that.$axios.post('http://localhost:8080/tangxiang_war/delete', {
						id: val.id,
						ISBN: val.ISBN,
						bookname: val.bookname,
						author: val.author,
						money: val.money
					});
					that.tableData.splice($index, 1);
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			close(){
				this.dialogTableVisible=false;
			}
		},
		mounted() {
			this.getList();
		}
	};
</script>
<style></style>