<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="vue2.2.js"></script>

    </head>

    <body>

        <div id="app">

            <aa></aa>

            <hr />

            <bb></bb>

        </div>

        <script type="text/javascript">

            // 注册一个空的 Vue 实例，作为 ‘中转站’

            var eventBus = new Vue();

            //A组件

            Vue.component("aa", {

                template: "<button @click='addBar'>点击</button>",

                data: function() {

                    return {

                    }

                },

                methods: {

                    addBar: function() {

                        //让B组件执行监听事件

                        eventBus.$emit('doCount')

                    }

                }

            });

            //B组件

            Vue.component("bb", {

                template: "<div>{{count}}</div>",

                data: function() {

                    return {

                        count: 0

                    }

                },

                //在组件创建的钩子函数中监听事件

                mounted: function() {

                    var _this = this;

                    eventBus.$on("doCount", function() {

                        _this.count ++;//+=1

                    });

                }

            });

            new Vue({

                el: "#app"

            });

        </script>

    </body>

</html>

vue同胞组件通讯解决方案（以下为一种另外可用vuex解决）的更多相关文章

  1. vue组件通讯方法汇总（在不使用vuex的情况下）

    前三种是父子组件通讯,最后一种是平级组件.

  2. seventBus（封装） 一个巧妙的解决vue同级组件通讯的思路

    如果在你项目中需要多处用到同级组件通讯,而又不想去写繁琐的vuex,可以参考这个小思路.本人在写项目中琢磨出来的,感觉挺好用,分享一下. 1.在utils文件夹下添加BusEvent.js 注释已经很 ...

  3. vue的组件通讯

    Vue的组件通讯又称组件传值 一.父子组件传值: 父组件: <子组件名   :动态变量名 (随便起)='你想要传递的数据' ></子组件名> 子组件: 利用 prop去接收父组 ...

  4. vue 组件通讯方式到底有多少种 ?

    前置 做大小 vue 项目都离不开组件通讯, 自己也收藏了很多关于 vue 组件通讯的文章. 今天自己全部试了试, 并查了文档, 在这里总结一下并全部列出, 都是简单的例子. 如有错误欢迎指正. 温馨 ...

  5. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

  6. 聊聊Vue.js组件间通信的几种姿势

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

  7. vue 父子组件传值的另外一种方式 provide inject

    1.文档说明 https://cn.vuejs.org/v2/api/#provide-inject 2.实例 element ui的dropdown组件 dropdown.vue: provide( ...

  8. 深入理解Vue父子组件通讯的属性和事件

    在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...

  9. Vue父子组件通讯

    我们知道,父组件不能修改子组件的数据[这种说法是不严谨的],严谨的说法是:子组件内部不能修改从父组件传递过来的值.原因是vue遵循的是数据单向流原则,父组件传递数据给子组件只能单向绑定,通过Props ...

随机推荐

  1. ubuntu 源、codename 与 sources.list 文件

    查看 codename $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubunt ...

  2. 喵哈哈村的魔法考试 Round #1 (Div.2)

    比赛地址:http://qscoj.cn/contest/2/ 都是中文题,这里不在详述题意 A.喵哈哈村的魔法石 分析:暴力求解 #include<iostream> #include& ...

  3. gunicorn启动django时静态文件的加载

    目前在用nginx+gunicorn对django进行部署 当我用gunicorn -w 4 -b 127.0.0.1:8080 myproject.wsig:application启动django时 ...

  4. JAVA interrupte中断线程的真正用途

    Java线程之中,一个线程的生命周期分为:初始.就绪.运行.阻塞以及结束.当然,其中也可以有四种状态,初始.就绪.运行以及结束. 一般而言,可能有三种原因引起阻塞:等待阻塞.同步阻塞以及其他阻塞(睡眠 ...

  5. linux中使用netstat

    1 功能: 显示本机的网络连接.运行端口和路由表的信息. 2 常见选项 -a:显示本机所有连接和监听的端口 -n:网络IP地址的形式显示当前建立的有效连接和端口 -r:显示路由表信息 -s:显示按协议 ...

  6. 【WEB基础】HTML & CSS 基础入门（3）段落及文本

    写在前面:CSS选择器 网页要显示很多内容,想要为每个内容设置不同的样式,我们就得首先选中要设置样式的内容,CSS选择器就是指明该样式是针对HTML里哪一个元素的.简单的例子,网页上有几段文字,我们想 ...

  7. hdoj5563（简单几何）

    笑死我了,居然一遍就过了. 题意:给你5个点,让你判断能否组成一个五角星: 思路: 利用对称性,应该有很多种方法.弱打的很麻烦.但是那个两点式公式去判断另外一个点是否在一条直线上的那个判断,还是蛮喜欢 ...

  8. AT2534 港湾設備 (Port Facility)

    洛谷 先膜一下Iscream巨巨 首先我们可以把题目转化为线段覆盖,如果两条线段相交(不算某一条完全在另一条里面的情况),那么这两条线段代表的集装箱就不能放到同一个栈里,我们在它们之间连一条边.如果图 ...

  9. python 标准库大全

    python 标准库 文本 string:通用字符串操作 re:正则表达式操作 difflib:差异计算工具 textwrap:文本填充 unicodedata:Unicode字符数据库 string ...

  10. 第十五篇 .NET高级技术之正则表达式

    正则表达式 正则表达式是对字符串进行匹配的语法,像name like '%李%'一样,定义了一些特殊的“元字符”,用来判断一个字符串是否满足某个规则.正则表达式非常深,编译器都是基于正则表达式,掌握基 ...