自定义非父子组件传值

const center = {};

center.on = function (eventName, callback) {

if (!center[eventName]) {

center[eventName] = [];

}

//保存回调函数

center[eventName].push(callback);

}

center.emit = function (eventName, params) {

//取出对应事件的回调函数

let callbackArr = center[eventName];

//一一调用每一个回调事件

callbackArr.map((callback) => {

callback(params);

})

}

center.off = function (eventName, callback) {

//情况1：只传eventName，移除所有事件

//情况2：传eventName和callback

if (!callback) {

center[eventName] = null;

}

else {

let callbackArr = center[eventName];

//删除指定的callback回调

let result = callbackArr.filter(callbackItem => {

if (callback == callbackItem) {

return false;

}

else {

return true;

}

})

//重新赋值

center[eventName] = result;

}

}

export default center;

原文地址：https://www.cnblogs.com/jusonhtml5/p/9339664.html

时间： 2024-08-03 18:58:12

自定义非父子组件传值的相关文章

【vue】父组件主动调用子组件 /// 非父子组件传值

一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div> 父组件主动获取子组件的数据和方法: 1

Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值

Vue常用的三种传值方式有: 父传子 子传父 非父子传值 引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息 1. 父组件向子组件进行传值 父组件: <template> <div> 父组件: <input type="text" v-model="name"> <!-- 引入子组件 --> <child :abc=

React 父子组件和非父子组件传值

零.this.props 可以接收到 外界的传值 和 此组件标签内部自定义的方法 例: <one vals={message} sendVal={this.handleReverse.bind(this)}></one> 此时在子组件中打印this.props this.props = { vals : '**', sendVal : fn } 由此我们可以进行父子组件之间传值 一.父传子 在子组件标签中用自定义属性进行传递,接收的时候通过this.props进行接收 /* 父组件

Vue组件通信之非父子组件传值

前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是我总结的父子传值相关的知识,可供参考: https://www.cnblogs.com/ViavaCos/p/11712131.html 然后大概回顾一下父子传值的过程: 根据上述信息可知,如果两个组件需要传递值那么需要这两个组件之间是父子关系才能传递数据. 那么如果有这样一个组件,既可以帮你传递数

Vue父子组件和非父子组件传值问题

父组件跟子组件之间的传值(具体参考lonzhubb商城) 1.父组件传值给子组件形式,ifshop是要传的对象,右边ifshop代表要传的这个对象的数据 <v-select  :ifshop="ifshop"  :clickType="clickType" @close="close" @addShop="sureAddShop"></v-select> 2.子组件接收父组件的数据用props prop

Vue非父子组件传值(Bus/总线/发布订阅模式/观察者模式)

我们在之前已经知道了父子传值.父组件传递过来了的值,在子组件通过props接受,然后就可以使用了. 也学过了隔代传值,均是通过props逐层传递实现.那么,兄弟节点之间怎么传值呢? 通过bus实现方式如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> &l

Vue bus的使用（兄弟｜非父子组件传值）--&gt;可以使用一个空的Vue实例作为中央事件总线new Vue()

1.在main.js中注册全局的bus  Vue.prototype.bus=new Vue(); 2.在组建中使用 子组建使用:this.bus.$emit('自定义事件名',data) methods:{        handleClicks(){        this.bus.$emit('openMenu',true)       } } 父组建使用:  this.bus.$on("自定义事件名", msg => {}) mounted() {    this.bus

vue 非父子组件传值

1 <template> 2 <div id="news"> 3 4 我是新闻组件 5 <br> 6 7 <button @click="emitHome()">给Home组件广播数据</button> 8 9 <br> 10 </div> 11 12 </template> 13 14 15 <script> 16 //引入 vue实例 17 import

非父子组件间的传值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src="./vue.js"></script> </head> <body> <div