按钮实现在父组件页面中加入子组件

按钮实现在父组件页面中加入子组件

一、点击按钮可重复添加子组件

实现的功能：
点击一次按钮，在父组件中添加一个子组件
并使用 props 实现父组件向子组件传值

1、创建子组件

注意：
props: {} 与 data() 是同级
之前写的时候把props写到data()里面去了，一直出现子组件中 num undefined 的情况

<template>
	<div>
		<form :model="formObj" ref="childForm">
			<!-- 因为父组件传过来的值是数组下标，从0开始，因此此处需要 +1 处理 -->
			<p>这是子组件{{num + 1}}</p>
			<el-form-item label="性别：" prop="gender">
				<el-input v-model="formObj.gender"></el-input>
			</el-form-item>
		</form>
	</div>
</template>
<script>
export default {
	name: 'Child',
	// 子组件使用 props 接收父组件传递过来的数据
	props: {
		num: Number
	},
	data () {
		return {
			formObj: {}
		}
	}
}
</script>

2、在父组件中引用子组件

• 使用v-for循环来实现子组件的复用，点击一次按钮，增加一个子组件
• 如果不使用v-for，在导入子组件后就会直接渲染在页面上，使用v-for之后就可以实现点击一次按钮添加一次子组件啦

<template>
	<div>
		<el-form :mode=“formDataObj” ref="formData">
			<el-row>
				<el-form-item label="姓名：" prop="name">
					<el-input v-model="formDataObj.name"></el-input>
				</el-form-item>
			</el-row>
			<el-row>
				<!--  
					使用v-for循环的时候，注意绑定key值 
					:num="index"  绑定数组下标的值，传递给子组件 ，这样就可以实现数字一次递增
					之前使用的是直接绑定一个data中的数据num，但是在改变num的值的时候就会全部改变，对于想要显示添加的是第几个子组件是实现不了的 
				-->
				<child ref="fatherForm" :num="index" v-for="(item, index) in infoData" :key="index">		
				</child>
			<el-row>
			<el-row>
				<el-button @click="addForm">增加</el-button>
				<el-button @click="resetForm('formData')">重置</el-button>
			</el-row>
		</el-form>
	</div>
</template>
<script>
// 引入子组件
import Child from '/子组件所在的目录'
export default {
	// 注册子组件
	components: {
		Child
	},
	data () {
		// num初始值设为0
		// num: 0,
		infoData: [],
		formDataObj: {}
	},
	methods: {
		addForm() {
			// 注意：push()方法里一定要加 {}
			this.infoData.push({})
			// 修改为绑定index的值以后，就不需要这个操作了
			// this.num += 1
		}
	}
}
</script>

3、使用父组件按钮清空子组件表单

3.1 在父组件中添加一个重置按钮

<el-button @click="resetForm('formData')">重置</el-button>

注意：此时传的参是父组件表单绑定的ref，用来清除父组件表单

3.2 给引入的子组件添加refref="fatherForm"

<child ref="fatherForm" :num="index" v-for="(item, index) in infoData" :key="index">	

3.3 给子组件本身的form表单添加refref="childForm"

<form :model="formObj" ref="childForm">
	<!-- 因为父组件传过来的值是数组下标，从0开始，因此此处需要 +1 处理 -->
	<p>这是子组件{{num + 1}}</p>
	<el-form-item label="性别：" prop="gender">
		<el-input v-model="formObj.gender"></el-input>
	</el-form-item>
</form>

3.4 在父组件的methods添加方法：resetForm()

注意获取的this.$refs.fatherForm是一个数组！！！
可以用console.log()打印一下看看具体内容

resetForm(formName) {
	// 清除父组件表单数据
	this.$refs[formName].resetFields()
	// 清除子组件表单数据
	// 因为是可以添加多个表单，所以清除的时候也需要清除多个，此处使用for循环来实现 
	for (var 1 = 0; i < this.$refs.fatherForm.length; i++) {
		this.$refs.fatherForm[i].$refs.childForm.resetFields()
	}
}

二、点击按钮只能添加一次子组件

实现功能：点击按钮，显示子组件内容，也就是子组件内容一开始不显示，只有点击了按钮才会显示

还是用上面那个例子，不过在父组件中引入子组件时就不再使用v-for了
这样，页面加载的时候就会直接把子组件也加载出来，此时，可以使用v-if来做一个判断

<child ref="fatherForm" v-if="childFormVisible">	

在父组件的data()中定义childFormVisible，使用布尔值来做判断
因为一开始是不显示的，所以初值设为false

data() {
	return {
		childFormVisible: false
	}
}

最后就是写addForm()方法，把childFormVisible的值设为true即可

addForm() {
	this.childFormVisible = true
}