用vue+elementui写后台时,实现页面间弹出框的form表单,使用父子组件间传值
父组件向子组件传值,父组件向子组件传值是通过props传递的
子组件向父组件改变值时,通过$emit改变
父组件中
import ExitProductCreate from '../dialog/ExistProductCreate'
//前面使用props传值,后面捅过$emit改变父组件间的值
export default {
components{
ExistProductCreate
}
data() {
return {
dialogVisible1 : false
}
}
子组件中
html中://通过点击取消按钮,关闭弹出框,改变父组件中的值取消
<el-button @click="cancle">取消</button>
js中:
export default {
props: {// 接受父组件传递过来的props dialogVisibe:Boolean
}// 监听父组件穿过来的值 watch: {
dialogVisible: function(newItemVal, oldItemVal) {
this.dialogVisible1 = newItemVal;
},
methods:{
cancle(){
this.dialogVisible1 =false;
this.$emit("changeFather","false")
}
}