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模拟滚动条(横向竖向)
Feb 22 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 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
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
php源码的使用方法讲解
2019/09/26 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
three.js 入门案例详解
2018/01/23 Javascript
js正则相关知识点专题
2018/05/10 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
如何管理Vue中的缓存页面
2021/02/06 Vue.js
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
python登陆asp网站页面的实现代码
2015/01/14 Python
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python ---lambda匿名函数介绍
2019/03/13 Python
Python基于WordCloud制作词云图
2019/11/29 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
python压包的概念及实例详解
2021/02/17 Python
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
2014年自我评价
2014/01/04 职场文书
四年级数学教学反思
2014/02/02 职场文书
2019广播稿怎么写
2019/04/17 职场文书
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技