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实现的页面关键字密度查询代码
Dec 27 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
python在指定目录下查找gif文件的方法
2015/05/04 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
Python的Lambda函数用法详解
2019/09/03 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
什么是python的id函数
2020/06/11 Python
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
应届护士推荐信
2013/11/16 职场文书
给老师的检讨书
2014/02/11 职场文书
文秘个人求职信范文
2014/04/22 职场文书
班级学习计划书
2014/04/27 职场文书
村党支部公开承诺书
2014/05/29 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
小学教师求职信范文
2015/03/20 职场文书
叶问观后感
2015/06/15 职场文书