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 相关文章推荐
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
JavaScript简易计算器制作
Jan 17 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 分页原理详解
2009/08/21 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
Python中如何获取类属性的列表
2016/12/26 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
pytorch梯度剪裁方式
2020/02/04 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
财产分割协议书范本
2014/11/03 职场文书
追讨欠款律师函
2015/06/24 职场文书
护理工作心得体会
2016/01/22 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
Win10系统下配置Java环境变量
2021/06/13 Java/Android
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle