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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
JS定义类的六种方式详解
May 12 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
JavaScript模块详解
2017/12/18 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
利用python获取Ping结果示例代码
2017/07/06 Python
python批量创建指定名称的文件夹
2019/03/21 Python
浅谈Python基础—判断和循环
2019/03/22 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
python 如何调用 dubbo 接口
2020/09/24 Python
Django websocket原理及功能实现代码
2020/11/14 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
关键字final的用法
2013/10/02 面试题
高中毕业的自我鉴定
2013/12/09 职场文书
兴趣小组活动总结
2014/05/05 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
解决Oracle数据库用户密码过期
2022/05/11 Oracle