openjs

Appearance

事件发布订阅 Event ​

基本使用 ​

主要针对当前页面或者单页面应用，全局事件发布和订阅

点击按钮，修改本行文本

显示代码
html
<div>
	<p style="margin: 10px 0!important;" id="default">点击按钮，修改本行文本</p>
	<button class="open-btn open-btn-primary" bg @click="onClick">触发事件修改文本</button>
</div>

<script setup>
	import { onMounted } from 'vue'
	import { event } from '../public/openjs@0.1.0-beta.esm.js'

	// 订阅事件
	event.on('changeText',function(name){
		// 获取文本元素
		let text = document.querySelector("#default");
		// 修改文本
		text.innerText = name;
	})

	// 触发事件
	const onClick = function(){
		event.emit('changeText','现在是修改后的文本了，哈哈');
	}
</script>
<div>
	<p style="margin: 10px 0!important;" id="default">点击按钮，修改本行文本</p>
	<button class="open-btn open-btn-primary" bg @click="onClick">触发事件修改文本</button>
</div>

<script setup>
	import { onMounted } from 'vue'
	import { event } from '../public/openjs@0.1.0-beta.esm.js'

	// 订阅事件
	event.on('changeText',function(name){
		// 获取文本元素
		let text = document.querySelector("#default");
		// 修改文本
		text.innerText = name;
	})

	// 触发事件
	const onClick = function(){
		event.emit('changeText','现在是修改后的文本了，哈哈');
	}
</script>

API ​

API描述
event.on(name,fn)订阅事件
event.emit(name,param)发布（触发）事件
event.off(name)关闭事件

  • event.on(name,fn) ​

参数名描述类型必填默认值
name事件名string是-
fn(param)回调函数function是-

使用方法

js
//回调函数的参数，根据触发时是否传递参数为准
event.on('name',function(param){
	// 需要执行的逻辑
	// ......
})
//回调函数的参数，根据触发时是否传递参数为准
event.on('name',function(param){
	// 需要执行的逻辑
	// ......
})

  • event.emit(name,param) ​

参数名描述类型必填默认值
options.name需要触发的事件名，string是-
options.param传递参数string | number | object | array否-

使用方法

js
// 触发on监听的函数，并传递参数param
event.emit('name',"param");
// 触发on监听的函数，并传递参数param
event.emit('name',"param");

  • event.off(name) ​

参数

参数名描述类型必填默认值
name需要关闭的事件名，string是-

使用方法

js
// 关闭触发的函数
event.off('name');
// 关闭触发的函数
event.off('name');