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 相关文章推荐
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
vue仿element实现分页器效果
Sep 13 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 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
使用数据库保存session的方法
2006/10/09 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php文件缓存类汇总
2014/11/21 PHP
php遍历CSV类实例
2015/04/14 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
基于jquery的多功能软键盘插件
2012/07/25 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
工商管理专业职业生涯规划
2014/01/01 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书