在 vue 中，this 的指向取决于上下文：方法中指向当前 vue 实例。模板中指向组件上下文，包括数据、属性、计算属性和方法。事件处理程序中默认指向 dom 元素，可通过 bind 或 v-on 修饰符绑定到 vue 实例。全局对象中指向 vue 根实例，可访问全局配置和方法。
Vue 中 this 指向什么
在 Vue 中，this 关键字指向不同的对象，具体取决于它的使用上下文。
1. 方法和计算属性
在方法和计算属性中，this 指向当前的 Vue 实例。这意味着你可以访问实例的数据和方法，例如：
立即学习“前端免费学习笔记（深入）”；
<code class="javascript">methods: {
logThis() {
console.log(this);
},
},</code>调用 logThis 方法时，this 将指向当前的 Vue 实例。
2. 模板
在模板中，this 指向当前组件的上下文对象，该对象包括以下属性：
全诚商城生成HTML多用户版
下载
1、什么是店中店？店中店是全诚商多用户版的一大特色，它既是独立的个体，又具有群集功能。我们做个例子说明：假设尊贵的您现实生活中租赁了一个店面，店面空间很大，您可以把您的店面分割成很多独立空间再向别人转租，这样您可以额外获得一部分租赁费用收入，借以减少你的个人租赁费用投入，还能起到活跃销售场所的气氛，俗话说：货卖一堆吗。你租赁的店面可以完全分割成很多空间向外转租，也可以自己保留一块空间为自己销售商品
-
$data：组件的数据对象 -
$props：组件接收的属性 -
$computed：组件的计算属性 -
$methods：组件的方法
例如，在以下模板中：
<code class="html"><template>
<p>{{ this.$data.message }}</p>
</template></code>this.$data.message 将访问组件 data 对象中 message 属性。
3. 事件处理程序
在事件处理程序中，this 指向触发该事件的 DOM 元素。但是，可以通过使用 bind 或 v-on 修饰符来将 this 绑定到当前的 Vue 实例。
例如：
<code class="javascript">methods: {
handleClick(event) {
console.log(this); // 指向 Vue 实例
},
},</code><code class="html"><button @click="handleClick">Click Me</button></code>
4. 全局对象
在 Vue 根实例之外，this 会指向全局 Vue 对象。这意味着你可以访问全局配置和方法，例如：
<code class="javascript">console.log(this.$options.components); // 打印注册的全局组件 this.$mount(app); // 挂载 Vue 根实例</code>
