vue+elementui 页面弹出框

用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")

}

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容