vue 封装一个监控功能
时间: 2023-05-11 10:02:32 浏览: 70
可以使用 Vue 的 mixin 功能来封装一个监控功能。首先,创建一个 mixin 文件,定义一个名为 `monitor` 的对象,其中包含一个 `mounted` 钩子函数和一个 `methods` 对象,如下所示:
```
// monitor.js
export const monitor = {
mounted() {
console.log('Component mounted');
},
methods: {
trackEvent(eventName) {
console.log(`Event tracked: ${eventName}`);
}
}
};
```
然后,在需要使用监控功能的组件中,引入该 mixin 文件,并在组件的 `mixins` 选项中添加 `monitor` 对象,如下所示:
```
// MyComponent.vue
<template>
<div>
<button @click="trackEvent('Button clicked')">Click me</button>
</div>
</template>
<script>
import { monitor } from './monitor';
export default {
mixins: [monitor],
methods: {
handleClick() {
this.trackEvent('Button clicked');
}
}
};
</script>
```
这样,当该组件被挂载时,会输出 `Component mounted`,当按钮被点击时,会输出 `Event tracked: Button clicked`。