首页 > 其他分享 >vue broadcast和dispatch

vue broadcast和dispatch

时间:2023-11-08 22:12:27浏览次数:26  
标签:eventName vue name parent componentName dispatch broadcast params

function broadcast(componentName, eventName, params) {
this.$children.forEach((child) => {
const name = child.$options.componentName;

if (name === componentName) {
child.$emit(...[eventName].concat(params));
} else {
broadcast.apply(child, [componentName, eventName].concat([params]));
}
});
}
export default {
methods: {
dispatch(componentName, eventName, params) {
let parent = this.$parent || this.$root;
let name = parent.$options.componentName;

while (parent && (!name || name !== componentName)) {
parent = parent.$parent;

if (parent) {
name = parent.$options.componentName;
}
}
if (parent) {
parent.$emit(...[eventName].concat(params));
}
},
broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
},
},
};

标签:eventName,vue,name,parent,componentName,dispatch,broadcast,params
From: https://www.cnblogs.com/zerofan/p/17818458.html

相关文章

  • vue2+antd 使用select 通过v-model 无法回显也不能修改?
    <template><a-tablesize="middle":data-source="dataList":pagination="false":locale="{emptyText:'暂无数据'}":scroll="{x:'max-content'}"><a-table-columntitle=......
  • 在vue中页面跳转有几种方法?
    在Vue中,有几种方法可以实现页面跳转。以下是常用的几种方法:使用<router-link>组件:如果你使用了VueRouter来进行路由管理,可以使用<router-link>组件来创建带有路由的链接。例如:<router-linkto="/about">About</router-link>使用编程式导航:VueRouter还提供了编程式导航的......
  • vue2获取cookie/删除cookie/设置cookie
    起因,访问不同路由跳到首页/需登录账号demo<template><div><button@click="setCookie">设置Cookie</button><button@click="getCookie">获取Cookie</button><button@click="deleteCookie">删除Cook......
  • 课程详情接口、所有章节接口、课程列表前端、课程详情前端、视频托管、Header.vue搜索
    课程详情接口#思路一:直接在之前写好的查询所有课程的视图类上,配置一个类即可classCourseView(GenericViewSet,CommonListModelMixin,CommonRetrieveModelMixin)返回的字段,跟详情,不太对应(详情中要求拿出所有章节和课时,但实际上只返回了4个课时)序列化类---》重......
  • 封装 Vue 组件的过程?
    组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题分析需求:确定业务需求,把页面中可以复用的结构,样式以及功能,单独抽离成一个文件,实现复用具体步骤:使用Vue.extend方法创建一个组件,然后使用Vue.comp......
  • vue3 使用elementUI饿了么el-table组件 动态循环自定义表头列数据
     在vue3上使用el-table组件自定义循环表头列;<el-table:data="list"v-loading="loading"border>      <!--@selection-change="handleSelectionChange"-->      <!--<el-table-columntype="selection"wi......
  • 【开源】基于Vue.js的学生日常行为评分管理系统的设计和实现
    一、摘要1.1项目介绍基于Vue+SpringBoot+MySQL的学生日常行为评分管理系统,包含了评分项目模块、评分数据模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,学生日常行为评分管理系统基于角色的访问控制,给学生、......
  • vue上传文件
    以下是上传的组件库,需要更改接口<template><divclass="upload-file"><el-uploadmultiple:action="uploadFileUrl":before-upload="handleBeforeUpload":file-list="fileList":limit="li......
  • vue3异步组件
    父组件中,子组件的加载一般是按照先后顺序加载的,子组件加载后才会加载父组件。一个页面的子组件很多,由于会先加载子组件,那么父组件可能会出现比较长的白屏等待时间大型项目,可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件Vue提供defineAsyncComponent方法:import......
  • 38-Vue脚手架-过渡与动画
    Vue封装的过渡与动画在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名 transition讲解transition是vue内置的一个组件,我们可以直接使用。<transition>元素作为单个元素/组件的过渡效果。<transition>  只会把过渡效果应用到其包裹的内容上,而不会额......