el-dialog 回传数据

### Element UI `el-dialog` 组件返回父组件的数据传递 在使用 Element UI 的 `el-dialog` 组件时，可以通过定义子组件中的方法来处理关闭对话框前的操作，并通过自定义事件向父级组件传递数据。具体来说，在子组件内触发一个 `$emit('update:data', data)` 或者其他命名的事件可以携带参数给父组件。 #### 子组件代码示例 ```vue <template> <div> <!-- 对话框 --> <el-dialog :visible.sync="dialogVisible" @close="handleClose"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="cancel">取 消</el-button> <el-button type="primary" @click="confirm">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { props: ['value'], computed: { dialogVisible: { get() { return this.value; }, set(val) { this.$emit('input', val); } } }, methods: { cancel() { this.dialogVisible = false; }, confirm() { const sendDataToParent = 'someData'; // 要发送到父组件的数据 this.$emit('child-event', sendDataToParent); this.dialogVisible = false; }, handleClose(done) { this.$confirm('确认关闭？') .then(_ => { done(); }) .catch(_ => {}); } } }; </script> ``` #### 父组件接收数据示例 ```vue <template> <div> <el-button @click="openDialog">打开对话框</el-button> <my-child-component v-model="isShowChildComponent" @child-event="getChildEvent"></my-child-component> <p>{{ receivedData }}</p> </div> </template> <script> import MyChildComponent from './MyChildComponent.vue'; export default { components: { MyChildComponent, }, data() { return { isShowChildComponent: false, receivedData: '' }; }, methods: { openDialog() { this.isShowChildComponent = true; }, getChildEvent(dataFromChild) { console.log(`来自子组件的消息:${dataFromChild}`); this.receivedData = dataFromChild; } } }; </script> ``` 上述例子展示了如何利用 Vue.js 中父子组件间的通信机制让 `el-dialog` 将内部产生的数据反馈给其所在的上级容器[^1]。