Vue:在方法中访问组件对象
[英] Vue: access component object inside methods
本文介绍了Vue:在方法中访问组件对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想访问一个组件的对象，但是方法中的 this 是对 methods: {} 对象的引用.
<div class="underground-station-input"><div class="underground-station-input-container flex items-stretch px-4 w-full mb-3"><div class="line-icon-container bg-gray-50 h-14 flex items-center rounded-l-2xl w-1/12 flex-shrink-0 flex-grow-0"><div class="line-icon rounded-full w-3 h-3 bg-gray-500 ml-6"></div>
<输入引用=输入"class =pl-3 font-normal text-gray-900 bg-gray-50 outline-none w-10/12 flex-shrink-0"/><div class="clear-button-container bg-gray-50 h-14 flex items-center justify-center rounded-r-2xl w-1/12 flex-shrink-0 flex-grow-0"><img class="clear-button w-2 h-2 self-center ml-auto mr-6";:src="clearButtonImageSource";alt=x"/>
</模板><脚本>从./CityDropdownSelectorItemsContainer"导入 CityDropdownSelectorItemsContainer；导出默认{名称:UndergroundStationInput"，组件:{CityDropdownSelectorItemsContainer}，道具:[clearButtonImageSource"，标识符"]，安装(){//这里没有什么},方法: {getInput: () =>{return this.$refs.input.value//<-- 这里的'this'不是组件对象，而是组件方法集}}}
如果你尝试调用'getInput()'，你会得到Uncaught TypeError: Cannot read property '$refs' of undefined
解决方案
根据官方文档 为了访问组件实例，您应该使用普通函数而不是箭头一:
方法:{获取输入(){返回 this.$ref.input.value}}
<块引用>
请注意，您不应使用箭头函数来定义方法(例如 plus: () => this.a++).原因是箭头函数绑定了父上下文，因此这不会是您期望的 Vue 实例，并且 this.a 将是未定义的.
I want to access an object of a component, but this in methods is references to the methods: {} object.
<template>
<div class="underground-station-input">
<div class="underground-station-input-container flex items-stretch px-4 w-full mb-3">
<div class="line-icon-container bg-gray-50 h-14 flex items-center rounded-l-2xl w-1/12 flex-shrink-0 flex-grow-0">
<div class="line-icon rounded-full w-3 h-3 bg-gray-500 ml-6"></div>
</div>
<input ref="input" class="pl-3 font-normal text-gray-900 bg-gray-50 outline-none w-10/12 flex-shrink-0"/>
<div class="clear-button-container bg-gray-50 h-14 flex items-center justify-center rounded-r-2xl w-1/12 flex-shrink-0 flex-grow-0">
<img class="clear-button w-2 h-2 self-center ml-auto mr-6" :src="clearButtonImageSource" alt="x"/>
</div>
</div>
</div>
</template>
<script>
import CityDropdownSelectorItemsContainer from "./CityDropdownSelectorItemsContainer";
export default {
name: "UndergroundStationInput",
components: {CityDropdownSelectorItemsContainer},
props: ["clearButtonImageSource", "identifier"],
mounted() {
// Nothing here
},
methods: {
getInput: () => {
return this.$refs.input.value // <-- 'this' here is not a component object, but set of component methods
}
}
}
</script>
If you try to invoke 'getInput()', you'll get Uncaught TypeError: Cannot read property '$refs' of undefined
解决方案
According to official docs You should use normal function instead of arrow one in order to get access to the component instance :
methods: {
getInput() {
return this.$ref.input.value
}
}
Note that you should not use an arrow function to define a method (e.g. plus: () => this.a++). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.a will be undefined.
这篇关于Vue:在方法中访问组件对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
