Moment For Technology

Write a simple VUE middleware, $emit, $ON

Posted on Sept. 23, 2022, 2:41 a.m. by Brent Cook-McMahon
Category: The front end Tag: The front end

preface

Most of you who have used VUE know thatUse of on. We just know how to use, sometimes it's not enough. Now I will lead you to write a simple middleware similar to vue empty instances.

Communication of non-parent components

The vUE website offers such a solution. Sometimes two components that are not parent-child also need to communicate. In simple scenarios, an empty Vue instance can be used as the event bus:

Var bus = new Vue() // Trigger the event bus in component A.$emit('id-selected', 1) // Listen for the event bus in the hook created by component B.$on('id-selected'.function (id) {
  // ...
})
Copy the code

A simple example

Here is a very simple example

Var myBus = (function() { var clienlist = {}, addlisten, trigger, remove; /** * add subscriber * @key {String} type * @fn {Function} callback Function ** / addlisten =function(key, fn) {
		if(! clienlist[key]) { clienlist[key] = []; } clienlist[key].push(fn); }; /** */ trigger =function() {var key = [].shift.call(arguments), // Retrieve message type FNS = clienlist[key]; // Retrieve the corresponding message set of this typeif(! fns || fns.length === 0) {return false;
		}
		for(var i = 0, fn; fn = fns[i++];) { fn.apply(this, arguments); }}; /** * delete subscription * @key {String} type * @fn {Function} return Function ** / remove =function(key, fn) { var fns = clienlist[key]; // Retrieve the corresponding message set of this typeif(! FNS) {// Return if the corresponding key is not subscribedreturn false;
		}
		if(! Fn) {// If no specific callback is passed, cancel all subscriptions FNS  (fns.length = 0); }else {
			for(var l = fns.length - 1; l = 0; L --) {// iterate back to the list of functionsif(fn === fns[l]) { fns.splice(l, 1); // Delete subscriber back to}}}};return {
		$on: addlisten,
		$emit: trigger,
		$off: remove } })(); // Vue.component('vv-count', {
	props: ["count"],
	template: ' div  \  span  {{count}}  / span   button @ click = "handelClick" type = "button"  computing  / button  \  / div ',
	methods: {
		handelClick() {
			console.log('vv-count total: ', this.count);

			if(vue_bus){// Trigger publication -- use vue bus.$emit("vv_count", this.count,'This is using vUE')}else{// Trigger publishing -- use your own myBus.$emit("vv_count", this.count,'I wrote it myself.'(}}}}); // Vue.component('vv-count1', {
	props: ["count"],
	template: ' div  \  span  {{count}}  / span   button @ click = "handelClick" type = "button"  computing  / button  \  / div ',
	methods: {
		handelClick() {
			console.log('vV-count1 total:', this.count);
			 
			 if(vue_bus){// Triggers the publication of the bus.$emit("vv_count", this.count)
			 }else{// trigger publish myBus.$emit("vv_count", this.count)
			 }
			
		}
	}
});

var vue_bus=true; //true: Using vUE's event bus,false: Use your own event busif(vue_bus){var bus = new Vue(); // Use vUE's event bus -- subscribe to bus.$on("vv_count".function() {
		console.log("Use arguments published by bus ==", arguments);
	});
}else{// Use your own event bus -- subscribe to myBus.$on("vv_count".function() {
		console.log("Use myBus published parameter ==", arguments);
	});
}


new Vue({
	el: "#app"
});
Copy the code

The above code can be toggled with vue_bus=true or false to see the effect. As shown in the figure:

Publish and subscribe Publish and subscribe

conclusion

Publishing subscriptions in VUE is the same as publishing subscriptions written by myself. I hope you can get knowledge.

Tipping channel - I don't think there will be tipping.

Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.