Vue.js
js文档Node.jsVue.jsReactjQueryES2015(es6)angularjscss3动画vbs最新电影flutter微信小程序C教程java教程C++教程C#教程php教程sql教程mysql教程android教程ios教程python教程正则表达式

vue非父子组件怎么进行通信

发布时间：2019-05-29 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue非父子组件怎么进行通信，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本文只在个人博客和 SegmentFault 社区个人专栏发表，转载请注明出处
个人博客: https://zengxiaotao.github.io
SegmentFault 个人专栏: https://segmentfault.com/blog...

写在前面

组件是 vue 的核心部分，而组件之间通信方式是必不可少的。 父子之间的通信方式很简单，父组件通过 props 向子组件传值，而子组件通过自定义事件把数据传递回父组件，那么非父子关系组件怎么进行通信？
Vue2.x 废弃了 broadcast 和 dispatch 之后，可以通过 vuex ，还有 event bus 来解决。这里不讲 vuex ，讲起来是另外一个话题，就讲一下怎么在非父子组件之间通过 event bus 进行通信。

demo

首先我们要实现的效果是

vue非父子组件怎么进行通信

上下分别是 foo组件和 bar 组件，它们之间是非父子关系，分别点击各自的 button ，另一个组件的 count 对应增加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件通信</title>
    <script src="https://unpkg.com/vue@2.1.8/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        <foo></foo>
        <hr>
        <bar></bar>
    </div>
</body>
</html>

以上就是这个 demo 结构。看看 js 的实现

// 注册一个空的 Vue 实例，作为 ‘中转站’
var eventBus = new Vue({})
// foo 组件
var foo = {
    template: '<div><p>the count of foo is {{fooCount}}</p>' +
                '<button @click="addBar">add bar's count</button></div>',
    data: function() {
        return {
            fooCount: 0            
        }
    },
    methods: {
        addBar: function() {
            // 触发事件
            eventBus.$emit('addBar')    
        }
    },
    mounted: function() {
        eventBus.$on('addFoo', function(num) {
            this.fooCount +=num
        }.bind(this)) 
        // 这里必须将 this 绑定在组件实例上。如果不使用 bind , 也可以使用箭头函数。
    }
}
// bar 组件
var bar = {
    template: '<div><p>the count of bar is {{barCount}}</p>' +
                '<button @click="addFoo">add foo's count</button></div>',
    data: function() {
        return {
            barCount: 0
        }
    },
    methods: {
        addFoo: function() {
            // 触发事件，同时传递一个参数
            eventBus.$emit('addFoo', 2)
        }
    },
    // 在 组件创建的钩子函数中 监听事件
    mounted: function() {
        eventBus.$on('addBar', function() {
            this.barCount++
        }.bind(this))
    }
}
var vm = new Vue({
    el: '#app',
    components: {
        foo,
        bar
    }
})

以上就实现了一个简易的 非父子组件之间的通信方式。通过 event bus ，在一个组件创建时的钩子函数中监听 某个事件，而在需要与其进行通信的组件中触发这个函数，同时交换数据。

当然，event bus 只适于某些不复杂的场景，在需要频繁进行组件通信的情况下，还是应该尽量使用 Vuex ，不仅使用上更加简单，同时数据流的流向也会相对清晰。

全文完

脚本宝典总结

以上是脚本宝典为你收集整理的vue非父子组件怎么进行通信全部内容，希望文章能够帮你解决vue非父子组件怎么进行通信所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：Vue
猜你在找的Vue.js相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新Vue.js教程
热门Vue.js教程