Javascript 是否将单击事件添加到Vue道具？

我有一个vue组件，它有许多道具，并且遇到了一个小问题。这个CTA组件按钮可以有一个脚注作为道具，也可以包含一个链接，就像这个按钮一样。即使是一个字符串，也可以将点击事件（google analytics tracker）添加到此链接吗

        <CTA
          title="Sign up for Savings"
          sub-title="Learn about the different ways<br> to save.<sup>&dagger;</sup>"
          :has-button="true"
          button-text="Sign up"
          button-href="/savings-and-support/savings"
          :has-footnote="true"
          footnote="<sup>&dagger;</sup>Restrictions apply. See <a @click='WHERE I WANT GA CLICK EVENT' href='/savings-and-support/savings#terms' style='text-decoration:underline'>eligibility requirements</a> for more information."
          @click="$ga.event('navigation', 'click', 'barker')">
        </CTA>

组成部分：

<template>
  <div class="cta-column" :class="{ 'cta-column--one-item': oneColumn }">
    <div class="icon">
      <slot name="icon"></slot>
    </div>

    <div class="cta callout-row__cta-title">
      <h2 v-html="title"></h2>
    </div>

    <div class="cta-sub-title">
      <p v-html="subTitle"></p>
    </div>

    <template v-if="hasButton">
      <router-link v-if="useRouterLink" :to="buttonHref" class="cta__button button" v-html="buttonText"> </router-link>

      <a v-else :href="buttonHref" class="cta__button button" v-html="buttonText"> </a>
    </template>

    <div class="cta-footnote" v-if="hasFootnote">
      <p class="footnote" v-html="footnote"></p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CTA',
  props: {
    title: {
      type: String,
      required: true
    },
    subTitle: {
      type: String,
      required: false
    },
    hasButton: {
      type: Boolean,
      required: false
    },
    buttonText: {
      type: String,
      required: true
    },
    footnote: {
      type: String,
      required: false
    },
    hasFootnote: false,
    oneColumn: false,
    buttonHref: {
      type: String,
      required: true
    },
    useAnchor: {
      type: Boolean,
      default: false
    }
  },
}
</script>

导出默认值{
名称：'CTA'，
道具：{
标题：{
类型：字符串，
必填项：true
},
副标题:{
类型：字符串，
必填项：false
},
按钮：{
类型：布尔型，
必填项：false
},
按钮文字：{
类型：字符串，
必填项：true
},
脚注：{
类型：字符串，
必填项：false
},
注：错，
一栏：错，
按钮参考：{
类型：字符串，
必填项：true
},
useAnchor：{
类型：布尔型，
默认值：false
}
},
}

您可以通过将

click

-处理程序绑定到重新发出事件的页脚

p

，从

CTA

转发

click

事件（带有）：

这将允许您绑定

单击

-选择

CTA

上需要分析的处理程序（即

）

---

这是否回答了您的问题？现在可以直接将GA事件传递到组件，如：@click=“$GA.event（'navigation'、'click'、'barker'）或事件需要一个方法吗？这样做很好。

v-bind

指令在内部用一个函数包装处理程序值（

$ga.event（…）

），该函数在事件发生时执行（而不是立即执行）。