Vue 中 $ 的含义

在 Vue.js 中，美元符号 ($) 是一个特殊的对象，它提供了对 Vue 实例的快捷访问。它等同于 关键字，但更方便，因为它可以在任何 Vue 组件或方法内使用，而无需显式绑定。

用途

$ 主要用于以下目的：

访问数据： $ 即 Vue 实例的 data 属性，可用于访问组件的数据属性。

访问方法： $ 即 Vue 实例的 methods 属性，可用于调用组件的方法。

访问生命周期方法： $ 即 Vue 实例的生命周期方法，可用于在组件生命周期的不同阶段执行代码。

访问其他实例： 在嵌套组件中，$ 可用于访问父级或子级组件的实例。

访问 Vue 实例的属性： $ 可用于访问 Vue 实例的属性，例如 （DOM 元素）或 （Vue Router 实例）。

示例

以下是使用 $ 的一些示例：

<code class="javascript">// 访问数据
console.log(this.data.message); // 与 $data.message 等效

// 访问方法
this.methods.greet(); // 与 $methods.greet() 等效

// 访问生命周期方法
created() {
  // 这里可以访问 this 或 $
  console.log(this.$el); // DOM 元素
}

// 访问嵌套组件实例
<child-component ref="child"></child-component>
this.$refs.child.doSomething(); // 调用子组件的方法</code>

提示

尽量避免过度使用 $，因为它会让代码更难懂。
在方法或生命周期钩子中使用 $ 时，确保将其与 互换使用。
对于嵌套组件，使用 $ 访问子级组件实例时，确保在模板中添加 属性。