vue+elementui 页面弹出框

Posted 2023-03-01

参考技术A 用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")