vuejs使用$emit和$on进行组件之间的传值的示例

Vue.js中组件间的传值是一个常见的需求，而 `$emit` 和 `$on` 是实现这一功能的重要工具。当我们谈论父子组件间的数据传递时，通常首先想到的是通过 `props` 从父组件向子组件传递数据。当需要从子组件向父组件传递数据时， `$emit` 和 `$on` 就派上了用场。

在通讯录功能的实现中，假设我们有两个组件：父组件 `contact_index.vue` 和子组件 `cust_tree.vue`。父组件展示通讯录的目录结构，子组件则负责展示具体的树形目录。当我们在子组件中点击某个银行时，需要传递该银行的机构代码给父组件，以便进一步操作。

我们通过 `props` 将树目录的数据传递给子组件，形成目录结构的展示。这一步是基础的数据传递，相对简单。

接下来，我们关注如何从子组件传递数据回父组件。这里， `$emit` 起到了关键作用。子组件在点击某个银行时，会触发一个自定义事件，并携带相应的数据（如机构代码）。这个自定义事件是通过 `$emit` 触发的。

要使 `$emit` 和 `$on` 能够正常工作，它们必须绑定到同一个 Vue 实例上。这是一个重要的前提，往往容易被忽视。父组件需要监听这个自定义事件，并通过 `$on` 方法来接收子组件传递的数据。当子组件触发自定义事件时，父组件就能监听到这个事件并获取到传递的数据。

通过这种方式，我们可以实现子组件向父组件的数据传递，完成通讯录功能的完整实现。这种基于 `$emit` 和 `$on` 的通信方式，使得 Vue.js 组件间的交互更加灵活和方便。

在项目的src目录下，我们新引入了一个名为bus.js的公共实例文件，用于组件间的通信。它的核心思想是通过Vue实例来创建一个事件总线，从而实现组件间的解耦通信。

在父组件中，我们在created生命周期钩子内定义了两个事件监听器，通过bus.$on来监听子组件发送的事件。当子组件触发'custTreeSay'事件时，我们会接收到机构代码（id），然后关闭弹窗，并调用查询方法来刷新通讯录列表。同样，当接收到'custTreeSayName'事件时，我们会获取到机构名称（name）。

子组件中，我们定义了点击事件，并通过props接收父组件传递的值。在点击事件中，我们调用propInstCode和propInstName方法，通过bus.$emit将相应的值（机构代码或机构名称）发送给父组件。

在界面展示上，我们将选择机构的交互方式进行了优化。机构名称的input框设置为可见，并绑定相关的点击事件；而机构代码的input框则隐藏起来，但依旧通过v-model绑定到父组件的数据上，以便在需要时传递值。

这样的设计既满足了用户选择机构的交互需求，又实现了后台查询的传值要求。当客户点击机构名称时，会触发相关的查询方法，通过事件总线将机构代码传递给父组件，进而提交给后台进行查询。我们也展示了机构名称，以便客户能够清晰地看到所选择的机构。

这篇文章记录了我们开发过程中遇到的一些问题及解决方案，希望通过分享这些经验能够帮助到更多的开发者。也希望大家能够关注并支持我们的项目——狼蚁SEO。

在界面设计上，我们注重用户体验和交互效果。通过使用标签、输入框等元素，我们构建了一个直观、易用的机构选择界面。点击机构名称时，会触发相关的操作，如弹出选择目录的对话框等。这样的设计使得用户能够方便快捷地进行操作，提高了使用效率和用户体验。

通过事件总线的方式实现组件间的通信，我们成功地解决了子组件向父组件传值的问题。结合前端开发的最佳实践和用户体验设计，我们打造了一个高效、友好的机构选择功能。希望这篇文章能够给开发者带来一些启示和帮助。

我们由衷地感谢大家的支持和关注。如果您有任何疑问或建议，请随时与我们联系。狼蚁SEO团队将不断努力，为大家提供更好的产品和服务。

以上文章的记录与分享就到这里，感谢大家的阅读！