在 Vue 中，this 的參考取決於上下文物件：在元件實例中，this 引用目前元件實例。在事件處理程序中，this 引用事件的 target 元素。在自訂指令中，this 引用指令函數中的上下文物件。在模板內方法中，this 引用目前元件實例。
Vue 中的this
在Vue.js 中，this 的值取決於目前上下文的上下文對象，它通常是指：
元件實例
#當this 在元件內使用時，它引用當前組件實例。這允許元件存取其：
例如，在以下元件中，this.message 引用元件實例的message 資料屬性：
<code class="vue"><template>
<div>{{ this.message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
}
}
</script></code>事件處理程序
#當this 在事件處理程序中使用時，它會引用事件的target 元素。例如，在以下程式碼中，this 引用按鈕元素：
<code class="vue"><template>
<button @click="handleClick">Click Me</button>
</template>
<script>
export default {
methods: {
handleClick() {
console.log(this) // 输出按钮元素
}
}
}
</script></code>自訂指令
當this 在自定義指令中使用時，它會引用指令的bind、inserted 或update 函數中的上下文物件。這允許指令存取：
this.vm）模板內方法
在模板內方法中，this 引用目前元件實例。這允許在模板中存取組件的資料和方法，就像在組件腳本中一樣。例如，以下程式碼在範本中呼叫元件的 greet() 方法：
<code class="vue"><template>
<div>{{ greet('Alice') }}</div>
</template>
<script>
export default {
methods: {
greet(name) {
return `Hello, ${name}!`
}
}
}
</script></code>以上是vue中的this指什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
