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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
Vue实现省市区三级联动
Dec 27 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
可以在线执行PHP代码包装修正版
2008/03/15 PHP
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
vue中appear的用法
2017/08/17 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
vue 优化CDN加速的方法示例
2018/09/19 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
python如何通过protobuf实现rpc
2016/03/06 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Python实现翻转数组功能示例
2018/01/12 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
地陪导游欢迎词
2015/01/26 职场文书
万能检讨书
2015/01/27 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
导游词之上海豫园
2019/10/24 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python