vue 数据上报组件

在某些场景下需向BI上报数据,为简化上报步骤,可使用自定义指令进行数据上报封装。要对上报到BI的函数进行统一封装,具体上报字段和id需双方沟通确定。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

有些场景下,需要我们去上报一些数据,给到BI进行统计。 为了简化上报步骤,使用自定义指令进行数据上报封装。

如何使用?

// 引入
import Vue from 'vue'
import { Report } from './components/testReport'
Vue.use(Report)
// dom use
<p v-report.view="reportObj">沙发上纷纷</p>
<p v-report.click="reportObj">沙发上111</p>
<p v-report="reportObj">沙发上111</p>
复制代码

testReport 内容


import RePortEventInfo from './event-info'
let Report = {}
Report.RePortEventInfo = RePortEventInfo
Report.install = function (Vue) {
  Vue.directive('report', {
    inserted: function (el, binding) {
      // view 上报
      console.log(binding)
      if (binding.modifiers.view || (!binding.modifiers.view && !binding.modifiers.click)) {
        Report.RePortEventInfo(binding.value)
      }
      // 点击上报
      if (binding.modifiers.click) {
        el.addEventListener('click', function () {
          Report.RePortEventInfo(binding.value)
        })
      }
    }
  })
}

export {
  Report
}

复制代码

上报到BI函数封装,进行统一,具体上报的字段、id双方沟通好。 eg:

reportObj = {
  event_id: '', // 必传 具体申请操作在https://appdata.oa.fenqile.com
  label: '', // 选传 在申请event_id时创建
  tag_list: [], // 选传 渠道码过滤标签key数组
  extend_info: {} // 选传拓展字段对象集合
}
复制代码

event-info.js 内容

import axios from 'axios'
export default function (evt = {}) {
  reportEventInfoH5(evt)
}
function reportEventInfoH5 (evt) {
  axios.post('/XXXXXXXX/uploadData.json', {
    data: {
      system: {
        app_version: '',
        new_version: '',
        machine_code: '',
        os: 'H5'
      },
      data_list: [{
        data_type: 2,
        record_list: [{
          event_id: evt.event_id,
          label: evt.label || '',
          time: Date.now(),
          extend_info: evt.extend_info
        }]
      }]
    }
  })
}
复制代码

3-5年内部岗位(平安、乐信、vivo、oppo)推荐机会,欢迎发简历到: zgxie@126.com

转载于:https://juejin.im/post/5d07409e518825361817074a

### Vue 封装组件的最佳实践与方法 #### 1. 组件封装的基本原则 在进行 Vue 组件封装时,应遵循一些基本的设计原则来提升组件的质量。这些原则包括单一职责、可复用性、可维护性、可测试性和可扩展性。具体来说: - **单一职责**:每个组件应该专注于实现一个特定的功能点[^2]。 - **可复用性**:设计组件时需考虑其可能的应用场景,使其能够适应不同的上下文环境。 - **可维护性**:保持代码结构清晰明了,使其他开发者容易理解并修改代码逻辑。 - **可测试性**:确保组件具有明确的输入输出接口,从而可以轻松编写单元测试验证功能正确性。 - **可扩展性**:预留足够的空间以便未来添加新特性或调整现有行为而无需大规模重构代码。 #### 2. 组件结构设计 良好的组件结构有助于增强项目的整体质量以及团队协作效率。以下是几个关键方面: - 使用 `props` 定义外部传入的数据参数,并设置默认值和类型校验机制以保障数据合法性。 - 利用计算属性 (computed properties) 处理复杂的业务逻辑或者派生状态变量,而不是直接操作原始 prop 值[^3]。 - 如果某些内部方法需要暴露给外界调用,则可通过自定义 API 的方式提供访问入口。例如,在子组件中定义 `focus()` 方法并通过 `$refs` 调用它: ```javascript <template> <div> <el-input ref="input"></el-input> </div> </template> <script> export default { methods: { focus() { this.$refs.input.focus(); } } }; </script> ``` #### 3. 父子组件间的通信 对于简单的父子关系之间传递消息的需求,推荐采用官方支持的标准做法——即利用 `props` 向下传输静态/动态配置项,再借助 `$emit` 上报事件通知父级更新相应字段值[^4]。然而当面临更复杂的情况比如跨多层嵌套甚至完全无关联的对象间交互时,则建议引入专门用于协调此类事务的服务工具如 Vuex 或者 Event Bus 来简化流程控制过程: // eventBus.js 文件内容如下所示: ```javascript import Vue from 'vue'; export const EventBus = new Vue(); ``` 之后可以在任何地方注册监听器等待接收信号源发出的消息包体即可完成整个链条构建工作流。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值