ElementUI Dialog 对话框，vue组件之间传值

2023-11-02 13:46| 来源: 网络整理| 查看: 265

这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战。

一、概述

在编辑、添加等操作时都用到Dialog对话框，不想全部写在一个组件中，就想重新写个Dialog组件，复用，把Dialog作为子组件，这里涉及到父子组件之间的传值。

二、自定义内容

Dialog 组件的内容可以是任意的，甚至可以是表格或表单，这里应用了 Element 中 Table 和 Form 组件的两个样例。

打开嵌套表格的 Dialog 打开嵌套表单的 Dialog 取消确定 export default { data() { return { gridData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], dialogTableVisible: false, dialogFormVisible: false, form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, formLabelWidth: '120px' }; } };

View Code 点击打开嵌套表单的 Dialog，效果如下：

三、组件之间传值

在实际开发过程中，对于Dialog 对话框，会单独创建一个vue文件，进行处理。这样的话，维护页面比较方便。而不是在一个总的vue文件，涉及几千行代码。

下面使用一个小demo，结合Dialog 对话框，演示组件之间传值。

目标：

父组件HelloWorld.vue，点击添加按钮，调用子组件Goods.vue，

弹出Dialog 对话框。输入表单数据

表单数据回传给父组件HelloWorld.vue

新建一个ElementUI项目，修改文件HelloWorld.vue，完整内容如下：

添加 // 使用子组件 import Goods from "./Goods"; export default { name: 'HelloWorld', // 注册组件 components: { Goods }, methods: { add() { // 弹出对话框 this.$refs.gds.showDialog() }, // 子组件传值给父组件-货物 parentGoods(obj) { // 打印子组件传递的值 console.log("parentGoods",obj) } } }

在HelloWorld.vue同级目录下，新建文件Goods.vue

取消确定 export default { name: "Goods", data() { return { dialogFormVisible: false, form: { name: '', region: '', }, formLabelWidth: '120px' } }, methods: { showDialog() { this.dialogFormVisible = true }, setGoods(){ // $emit触发当前实例上的事件 // 触发父组件的children事件，将this.form回传过去 this.$emit('children',this.form) // 关闭对话框 this.dialogFormVisible = false } } }

vm.$emit(eventName, […args])] ---- 触发当前实例上的事件。附加参数都会传给监听器回调。

【本文地址】

公司简介

联系我们