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 相关文章推荐
JS 修改URL参数(实现代码)
Jul 08 Javascript
Jquery倒计时源码分享
May 16 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
js实现简单数字变动效果
Nov 06 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
JS删除数组指定值常用方法详解
Jun 04 Javascript
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
基于PHP编程注意事项的小结
2013/04/27 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
实例讲解PHP表单
2020/06/10 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
Python中的__SLOTS__属性使用示例
2015/02/18 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
python实现剪切功能
2019/01/23 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
医院护士的求职信范文
2013/12/26 职场文书
企事业单位求职者的自我评价
2013/12/28 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python
Python实现简单得递归下降Parser
2022/05/02 Python