不太会用
hi500 opened this issue · 1 comments
hi500 commented
必须要绑定一个click的function吗?如何传递参数?我理解能力差,使用文档能再详细和清楚一些吗?Thanks♪(・ω・)ノ大神
l-hammer commented
不是必须的,只有事件行为的埋点才需要绑定click修饰符。v-track
主要是为了解决埋点代码和业务代码耦合的问题,不同类型的埋点都会有对应的修饰符。
至于传参,如下示例:一段业务代码,一段埋点代码,业务代码中的折叠面板组件提供了一个change的自定义事件,事件的回调接收一个当前激活面板名称的参数,同时上报一个id为18020的埋点事件。
<el-collapse
v-model="activeName"
v-track:18020.change="handleChange"
>
<el-collapse-item title="反馈" name="Feedback">...</el-collapse-item>
<el-collapse-item title="效率" name="Efficiency">...</el-collapse-item>
<el-collapse-item title="可控" name="Controllability">...</el-collapse-item>
</el-collapse>
<script>
export default {
data() {
return {
activeName: "Feedback",
};
},
methods: {
handleChange(val) {
this.activeName = val;
}
}
}
</script>
import trackAction from "./action";
export default {
/**
* @param {Object} context 当前上下文(可以访问当前实例上的任何属性)
* @param {Object} activeName 事件参数(即**当前激活面板名称**)
* @param {Object} event 事件对象
*/
18020(context, params) {
const { activeName, $route: { name } } = context;
// 这里的activeName其实就是params,因为我们在`handleChange`中做了赋值操作。
trackAction("18020", {
source_page: name,
active_name: activeName
});
}
}
埋点需要的大部分参数都可以从实例data
和事件本身接收的参数params
中获取到,除此之外你也可以从store or 其它的数据状态管理中获取。这里有个建议:尽量从公用的地方读取参数,而不是从传递事件本身不需要的参数中获取。
如果还有困惑,可以描述下具体的需求及遇到的问题,最好能用codesandbox提供一个的在线的demo。