Vue 2 | Part 8 组件通信

MartinDai 发布于2019-08-20 13:58 / 2412人阅读

摘要：实例和组件之间的通信先来看一下我们最后要完成的效果吧。在组件的内部监听到用户的事件后，执行自身的方法，把信号发布出去。所以可以直接把实例作为一个，在组件之间进行通信。比方说，我们希望点击按钮以后，另外一个组件可以接收到这个信号。

当组件监听到用户的行为，需要触发一些界面交互的时候，实例与组件之间、组件相互之间就需要进行通信了。Vue里面有两个api可以帮助我们轻松地完成这件事，它们是$on和$emit。

实例和组件(parent child)之间的通信

先来看一下我们最后要完成的效果吧。初始状态：

点击按钮以后隐藏文字：

初始代码


    
        I am your Big Box

Vue.component("toggle-btn", {
    template: ""
})

var app = new Vue({
    el: "#app"
})

我们把按钮做成一个简单的组件，那应该怎么获取按钮监听到的点击事件，传给big box呢？

监听按钮组件上的自定义事件

用户点击的时候，是在toggle-btn这个组件上触发了事件，所以我们信号的源头，肯定是在它身上。Vue允许我们监听组件上的自定义事件，像这样：

这里有几点需要注意的：

自定义的事件，需要用中划线分词，在HTML和JS都是。用驼峰分词是完全没有效果的。

虽然监听的是组件的自定义事件，但后面触发的这个toggleBox方法，是在Vue实例上的。

这里是监听的是自定义的事件，真正的click事件，是在组件内部进行监听（下面会解释）。

所以上面的这行HTML的意思，其实是，当Vue实例监听到组件上自定义的toggle-box事件被触发，就会执行它的toggleBox方法。

组件发布信号

被监听的事件有了，这个组件到底要怎么把信号发布出来，让Vue实例监听到呢？我们直接来看下面这段代码。

在组件的内部监听到用户的click事件后，执行自身的方法，把信号发布出去。

Vue.component("toggle-btn", {
    template: "
        
    ",
    methods: {
        emmitToggle: function() {
            // 用户点击之后，发布信号
            this.$emit("toggle-box")
        }
    }
})

完善事件触发的方法

接收到信号以后，我们希望可以toggle文字的显示，最直接的当然是在实例上的data里面初始化一个showBox为true，执行toggleBox方法的时候对它进行操作。同时，big box里面的文字通过v-show指令来控制是否显示。


    I am your Big Box

var app = new Vue({
    el: "#app",
    data: {
        showBox: true
    },
    methods: {
        toggleBox: function() {
            this.showBox = !this.showBox
        }
    }
})

完整的通信流程

组件监听用户行为（我们的例子里是点击）

用户点击，触发组件自身的方法并发布信号（$emit）：我这边的toggle-box事件被触发了

HTML中的v-on指令捕捉到这个信号，执行Vue实例下的toggleBox方法

showBox的值被修改，v-show对文字进行隐藏或显示

组件之间的通信

其实$emit方法是挂在Vue实例下，每一个Vue实例都会有$emit和$on方法。所以可以直接把vue实例作为一个event bus，在组件之间进行通信。

这里简单地举个例子。比方说，我们希望点击toggle按钮以后，另外一个组件可以接收到这个信号。

toggle-btn基本不变，只是改为使用event bus的$emit方法。listener中也同样使用event bus的$on对信号进行监听。

var bus = new Vue()

Vue.component("toggle-btn", {
    template: "
        
    ",
    methods: {
        emmitToggle: function() {
            // 注意这里使用的是bus，不是this
            bus.$emit("toggle-box")
        }
    }
})

Vue.component("listener", {
    template: "sibling component",
    mounted: function () {
        bus.$on("toggle-box", function () {
            alert("已经接收到toggle-box信号！")
        })
    }
})

var app = new Vue({
    el: "#app"
})

写在最后

源码地址：https://github.com/levblanc/v...

视频攻略：小的不才，为求一赞，自制本期视频攻略在此。

云服务器 GPU云服务器 Part-2 vue组件 vue组件开发 vue父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81343.html

Vue 2 | 基础API系列文章合集

摘要：在大家的鞭策和鼓励下，这个基础的系列终于完成了。关于更新的频率，因为是我自己一个人在做，文案视频都准备好了才发的话，最快也只能一周一更。最后这几期可以密集地更新，完全是因为公司放假了。不过月份的更新速度真的不能保证，抱歉。在大家的鞭策和鼓励下，这个基础API的系列终于完成了。所幸是没有真的更到一百期才完结（笑）。最初是因为觉得录视频好玩，才挖的这个坑。也想过中途放弃，关掉专栏，但由于...

instein 2019-08-20 14:00 评论0 收藏0
Vue 2 | Part 7 组件

摘要：因为这里会举一连串的例子，就直接用来作为组件名称了。这是一个组件名称定义的时候有一点需要注意的，就是要使用中划线分词。在组件的方法里面返回数据就可以了。在的组件中间定义的内容，就会被插入到的位置中去。敬请期待下一期，组件通信。界面写多了，大家应该都会想到一个问题：JS的模块写好以后可以在多个地方重复使用，HTML有没有办法做到呢？Vue给了我们这个能力，使用组件，就可以轻松做到。最...

xcold 2019-08-20 13:56 评论0 收藏0
Vue.js应用性能优化：第一部分---介绍性能优化和懒加载

摘要：我的目标是使本系列成为关于应用程序性能的完整指南。代码分割就是将应用程序分割成这些延迟加载的块。总结延迟加载是提高应用程序性能并减少其大小的最佳方法之一。在本系列的下一部分中，我将向您展示如何使用和路由来分割应用程序代码。当移动优先（mobile-first）的方式逐渐成为一种标准，而不确定的网络环境因素应该始终是我们考虑的一点，因此保持让应用程序快速加载变得越来越困难。在本系列文章...

ZweiZhao 2019-08-26 18:27 评论0 收藏0
Vue.js应用性能优化：第二部分---路由懒加载和 Vendor bundle 反模式

摘要：现在，我们将更深入地研究，并学习用于分割应用程序最实用的模式。本系列文章基于对性能优化过程的学习。路径时才被下载。为了便于理解，文件名称并不是由生成的真实名称。接下来，我们将学习其他部分和单独的组件也能够从主文件分割出来并延迟加载。在前一篇文章中，我们学习了什么是代码分割，它是如何与 Webpack 一起工作的，以及如何在Vue应用程序中使用延迟加载。现在，我们将更深入地研究，并学习...

0x584a 2019-08-26 13:45 评论0 收藏0
Vue.js应用性能优化：第三部分-延迟加载Vuex模块

摘要：静态模块不能被取消注册也不能延迟注册，并且在初始化后不能更改静态模块的结构不是状态。为此，我们将在路由对应的组件中加载模块，而不是在中导入并注册它。能代码分割模块是一个强大的工具。在前一部分，我们学习了足够强大的模式，可以显着提高应用程序的性能 - 按每个路由分割代码。虽然按路由分割代码非常有用，但是在用户访问我们的站点后，仍然有很多代码是不需要的。在本系列的这一部分中，我们将重点关...

charles_paul 2019-08-26 13:50 评论0 收藏0