Vue实现boradcast和dispatch的示例


Posted in Javascript onNovember 13, 2020

这篇内容主要是学习掘金小册vue组件精讲的一个案例,自己做下笔记,以免日后忘记。

1.mixins(混入)

我所理解的mixins就是共享,就好比面向对象里面的原型prototype那种感觉的东西,把相同的逻辑抽离出来便于维护。

先来看下src目录结构

src                    
├─ components       
│  ├─ A             
│  │  └─ index.vue  
│  ├─ B             
│  │  └─ index.vue  
├─ minixs           
│  ├─ emitter.js     //这个是要混入的js     
├─ store            
│  └─ index.js      
├─ views               
│  └─ Home.vue      
├─ App.vue          
└─ main.js  

2.emitter.js

//从外层向内层
function broadcast(componentName,eventName,params){
    this.$children.forEach(child=> {
        const name = child.$options.name;
        if(name === componentName)
        {
            child.$emit.call(child,eventName,params)
        }else
        {
            broadcast.call(child,componentName,eventName,params)
        }
    });
}

export default {
    data(){
        return{}
    },
    methods: {
        dispatch(conponentName,eventName,params){
            let parent = this.$parent || this.$root;
            let name = parent.$options.name;
            while(parent && (!name || name !==conponentName))
            {
                parent = parent.$parent;
                if(parent)
                {
                    name = parent.$options.name;
                }
            }
            if(parent)
            {
                parent.$emit.call(parent,eventName,params)
            }
        },
        broadcast(componentName, eventName, params){
            broadcast.call(this, componentName, eventName, params);
        }
    }
}

methods 里定义的 dispatch 和 broadcast 方法会被混合到组件里,自然就可以用 this.dispatch 和 this.broadcast 来使用。

这两个方法都接收了三个参数,第一个是组件的 name 值,用于向上或向下递归遍历来寻找对应的组件,第二个和第三个就是上文分析的自定义事件名称和要传递的数据。

可以看到,在 dispatch 里,通过 while 语句,不断向上遍历更新当前组件(即上下文为当前调用该方法的组件)的父组件实例(变量 parent 即为父组件实例),直到匹配到定义的 componentName 与某个上级组件的 name 选项一致时,结束循环,并在找到的组件实例上,调用 $emit 方法来触发自定义事件 eventName。broadcast 方法与之类似,只不过是向下遍历寻找。

3.具体的使用

A是B的父组件

//?组件A
<template>
<div class="main">
    <button class="btn" @click="handleClick">父组件A---触发事件</button>
    <B></B>
</div>
</template>

<script>
import B from '../B';
import emitter from '@/minixs/emitter';
export default {
    name: 'A',
    data() {
        return {};
    },
    //测试dispatch
    created() {
        this.$on('on-message', this.showMessage);
    },
    mixins: [emitter],
    components: {
        B,
    },
    methods: {
      //broadcast测试
        handleClick() {
            this.broadcast('B', 'on-click', 'Hello Vue.js');
        },
        showMessage(msg) {
            alert(msg);
        },
    },
};
</script>
<template>
<div class="b">
    我是子组件B
    <button @click="dispatchtest">dispatch发射~!?</button>
</div>
</template>

<script>
import emitter from '@/minixs/emitter';
export default {
    name: "B",
    mixins: [emitter],
    created() {
        this.$on('on-click', this.showMessage);
    },
    methods: {
        showMessage(text) {
            window.alert(text);
        },
      //dispatch派发测试
        dispatchtest() {
            this.dispatch("A", "on-message", "我就是全宇宙最善良的仔~!")
        }
    }
}
</script>

效果图:

Vue实现boradcast和dispatch的示例

Vue实现boradcast和dispatch的示例

以上就是Vue实现boradcast和dispatch的示例的详细内容,更多关于Vue实现boradcast和dispatch的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Extjs 几个方法的讨论
Jan 28 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
js实现导航吸顶效果
Feb 24 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 #Javascript
Vue 3.0中jsx语法的使用
Nov 13 #Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 #Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 #Javascript
PHP 502bad gateway原因及解决方案
Nov 13 #Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 #Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 #Javascript
You might like
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
监控 url fragment变化的js代码
2010/04/19 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
Python help()函数用法详解
2014/03/11 Python
python搭建微信公众平台
2016/02/09 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
聚网科技C++面试笔试题
2015/09/01 面试题
可贵的沉默教学反思
2014/02/06 职场文书
会计学自我鉴定
2014/02/06 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
爱牙日活动总结
2014/08/29 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
十二生肖观后感
2015/06/12 职场文书