網(wǎng)站推廣一般怎么做短視頻運營是做什么的
npm 包地址
mitt 是一個輕量級的 JavaScript 事件觸發(fā)器， 只有200b。有基本的事件觸發(fā)、訂閱和取消訂閱功能，還支持用命名空間來進行更高級的事件處理。
功能特點：
- Microscopic —— weighs less than 200 bytes gzipped
- Useful —— a wildcard “*” event type listens to all events
- Familiar —— same names & ideas as Node’s EventEmitter
- Functional —— methods don’t rely on this
- Great Name —— somehow mitt wasn’t taken
獲取 mitt
你可以通過以下幾種方式獲取 mitt。
- 使用 NPM 包
首先，你需要在項目根目錄下使用以下命令安裝 mitt：
# 使用 pnpm 安裝
pnpm add mitt
# 使用 npm 安裝
npm install --save mitt
# 使用 yarn 安裝
yarn add mitt
- 使用 CDN
你還可以通過 CDN 獲取構(gòu)建好的 mitt 文件。將以下代碼添加到 HTML 文件的 <script> 標簽中：
<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
引入 mitt
- 通過 NPM 包引入
在 JavaScript 文件頂部使用 import 引入 mitt：
// using ES6 modules
import mitt from 'mitt'// using CommonJS modules
var mitt = require('mitt')
- 使用
script標簽引入
通過直接在 HTML 文件中添加 <script> 標簽，引入構(gòu)建好的 mitt 文件：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!-- 引入 mitt 文件 --><script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script></head>
</html>
使用 window.mitt 來調(diào)用方法。
組件中使用
以實時獲取未讀消息數(shù)量為例。
- 首先，新建一個
mitt.js文件
import mitt from 'mitt'const emitter = mitt()export default emitter
- 使用
on訂閱事件/off取消訂閱
import { onMounted, onUnmounted, ref } from 'vue'
import emitter from '@/utils/mitt'const count = ref(0)const readmessage = () => {count.value = count.value - 1
}
onMounted(() => {emitter.on('messageread', readmessage)...
})
onUnmounted(() => {emitter.off('messageread', readmessage)
})
- 使用
emit觸發(fā)事件
import emitter from '@/utils/mitt'...
emitter.emit('messageread')
...
點擊查看后，未讀消息數(shù)量減一。
API
on
注冊事件處理器
| 參數(shù) | 類型 | 說明 |
|---|---|---|
| type | string | symbol | Type of event to listen for, or ‘*’ for all events |
| handler | Function? | Function to call in response to given event |
off
移除事件處理器
| 參數(shù) | 類型 | 說明 |
|---|---|---|
| type | string | symbol | Type of event to unregister handler from, or ‘*’ |
| handler | Function? | Handler function to remove |
emit
觸發(fā)事件，可以帶參數(shù)，參數(shù)可以為任意類型值
| 參數(shù) | 類型 | 說明 |
|---|---|---|
| type | string | symbol | The event type to invoke |
| handler | Any? | Any value (object is recommended and powerful), passed to each handler |