什么？你还不会Vue组件通讯？那你还不赶紧进来学！

Vue组件通讯

一、前言

1.1 介绍

这是一篇介绍如何在 Vue 组件中使用对话框，并通过事件发射（emit）实现组件之间通信的模板。

1.2 知识掌握

读懂这篇文章需要掌握 Vue.js 的基本知识，尤其是组件的创建与注册、事件的发射与监听、以及 Dialog 组件的使用。

1.3 资料

本篇文章会涉及到以下资料，我已经准备好了，可以在网盘中获取或者相关资料链接。

---

二、进入主题

2.1 注意事项

在使用 el-dialog 和子组件之间传递数据时，需要确保事件的正确发射和处理，同时注意对话框的可见性控制。

2.2 具体操作案例

1. 创建主组件 MyDailyReport.vue

<template>
    <el-dialog
        title="新增日报"
        :visible.sync="dialogVisible"
        width="30%"
    >
        <!-- 新增界面 -->
        <InserMyDailyReport @update-dia="updateDialogVisible()" />
    </el-dialog>
</template>

<script>
import InserMyDailyReport from "./InsertMyselfDayReport.vue";

export default {
    components: {
        InserMyDailyReport,
    },
    data() {
        return {
            dialogVisible: false,  // 控制对话框的可见性
        };
    },
    methods: {
        updateDialogVisible() {
            this.dialogVisible = false;  // 关闭对话框
        },
    },
};
</script>

1. 创建子组件 InserMyDailyReport.vue

<template>
    <div>
        <!-- 提交报告的按钮 -->
        <button @click="submitReport">提交日报</button>
    </div>
</template>

<script>
export default {
    methods: {
        submitReport() {
            // 处理数据提交
            this.$emit("update-dia", '关闭页面');  // 触发事件，通知父组件关闭对话框
        },
    },
};
</script>

2.3 思路解析

在这个示例中，MyDailyReport.vue 是主组件，它包含一个 el-dialog 元素，主要用于显示一个新增日报的对话框。通过注册子组件 InserMyDailyReport，我们在对话框中嵌入了一个用于提交日报的界面。当用户在 InserMyDailyReport 中点击提交按钮时，会触发 submitReport 方法，该方法通过 $emit 发射 update-dia 事件，通知父组件 updateDialogVisible 方法执行，进而关闭对话框。

本教程展示了如何在 Vue 组件间进行有效的消息通信，并维持组件之间的良好结构和功能分离。