Javascript 如何通过单击将HREF传递给Vue js中的方法？

以下是我对这个问题的公认答案：

我想将href传递给我的方法

linkAction（）

，如何通过单击

@来实现这一点

这就是我目前所拥有的

<template>
    <span
      href="https://www.w3schools.com/" <-- some url
      @click="linkAction(this)"
    >
      Link to W3 Schools 
    </span>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MainContent extends Vue {
  linkAction(e: any): any {
    console.log(e);
  }
}

</script>


无法从模板访问此

但您可以简单地使用
ref
属性，然后使用
this.$refs
来获取元素

<template>
    <span
      ref="link"
      href="https://www.w3schools.com/" <-- some url
      @click="linkAction"
    >
      Link to W3 Schools 
    </span>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MainContent extends Vue {
  linkAction(): any {
    console.log(this.$refs.link);
  }
}

</script>


无法从模板访问此

但您可以简单地使用
ref
属性，然后使用
this.$refs
来获取元素

<template>
    <span
      ref="link"
      href="https://www.w3schools.com/" <-- some url
      @click="linkAction"
    >
      Link to W3 Schools 
    </span>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MainContent extends Vue {
  linkAction(): any {
    console.log(this.$refs.link);
  }
}

</script>


在模板中，您需要将
@click=“linkAction（this）”
更改为
@click=“linkAction（$event）”

在方法
linkAction
中，您可以执行以下操作：

linkAction(e) {
  console.log(e.target.getAttribute('href'));
}

在模板中，您需要将
@click=“linkAction（this）”
更改为
@click=“linkAction（$event）”

在方法
linkAction
中，您可以执行以下操作：

linkAction(e) {
  console.log(e.target.getAttribute('href'));
}

一个选项是将
链接
作为组件的
数据的一部分
，然后在
链接操作
方法中使用它

<template>
    <span
      :href="link" 
      @click="linkAction">
      Link to W3 Schools 
    </span>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MainContent extends Vue {
  data(): any {
     return {
        link: 'https://www.w3schools.com/'
     }
  },

  linkAction(): any {
    console.log(this.link);
  }
}

</script>


链接到W3学校
从“Vue属性装饰器”导入{Component，Vue}；
@组成部分
导出默认类MainContent扩展Vue{
data（）：任何{
返回{
链接：'https://www.w3schools.com/'
}
},
linkAction（）：任何{
console.log（this.link）；
}
}
一个选项是将
链接
作为组件的
数据
的一部分，然后在
链接操作
方法中使用它

<template>
    <span
      :href="link" 
      @click="linkAction">
      Link to W3 Schools 
    </span>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MainContent extends Vue {
  data(): any {
     return {
        link: 'https://www.w3schools.com/'
     }
  },

  linkAction(): any {
    console.log(this.link);
  }
}

</script>


链接到W3学校
从“Vue属性装饰器”导入{Component，Vue}；
@组成部分
导出默认类MainContent扩展Vue{
data（）：任何{
返回{
链接：'https://www.w3schools.com/'
}
},
linkAction（）：任何{
console.log（this.link）；
}
}
这样当您单击时可以在控制台中看到“null”？因此，点击处理程序是装配好的，我猜“this”在“template”中不是一个已知的关键字-如果你这样做，@click=“linkAction”-我想你可以在“e”中免费获得“this”，无需硬编码，不需要使用ref：只需通过函数中的事件目标访问它，这样当您单击时，就可以在控制台中看到“null”？因此，点击处理程序是装配好的，我猜“this”在“template”中不是一个已知的关键字-如果你这样做，@click=“linkAction”-我想你可能会在“e”中免费获得“this”，无需硬编码，无需使用ref：只需通过函数内的事件目标访问它