Die Rolle des $-Symbols in Vue

Das

$-Symbol stellt die aktuelle Instanz in Vue dar und bietet Zugriff auf Instanzeigenschaften, Ereignisbus, Lebenszyklus-Hooks und spezielle Funktionen, einschließlich Zugriff auf Datenobjekte, Auslösen und Abhören von Ereignissen, Abrufen von Instanzreferenzen und Überprüfen von Stamminstanzen.

Die Rolle des $-Symbols in Vue

In Vue.js ist das $-Symbol eine spezielle Variable, die die aktuelle Instanz darstellt, an der gearbeitet wird. Es bietet Zugriff auf:

1. Instanzeigenschaften und -methoden

• $data: das Datenobjekt der Instanz $data：实例的数据对象
• $props：实例的属性对象
• $methods：实例的方法对象
• $computed：计算属性对象
• $watch：监听属性对象

2. 事件总线

• $emit：触发事件
• $on：监听事件
• $once：监听事件（仅触发一次）
• $off：移除事件监听器

3. 生命周期钩子

• $beforeCreate
• $created
• $beforeMount
• $mounted
• $beforeUpdate
• $updated
• $beforeDestroy
• $destroyed

4. 其他功能

• $root：获取根 Vue 实例
• $refs：访问组件的引用
• $parent：获取父组件实例
• $children
$props: das Instanzattributobjekt

$methods: Methodenobjekt der Instanz $computed: Berechnetes Attributobjekt

$watch: Überwachungsattributobjekt

🎜🎜🎜 2. Ereignisbus🎜🎜🎜🎜$emit: Ereignisse auslösen 🎜🎜$on: Ereignisse überwachen 🎜🎜$once: Ereignis überwachen (nur einmal ausgelöst) 🎜🎜$off: Ereignis-Listener entfernen 🎜🎜🎜🎜3. Lebenszyklus-Hook 🎜🎜🎜🎜$beforeCreate🎜🎜 $created🎜🎜$beforeMount🎜🎜$montiert🎜🎜$beforeUpdate🎜🎜$updated 🎜🎜 $beforeDestroy🎜🎜$destroyed🎜🎜🎜🎜4. Andere Funktionen🎜🎜🎜🎜$root: Holen Sie sich die Root-Vue-Instanz🎜🎜 $ refs: Greifen Sie auf die Referenz der Komponente zu🎜🎜$parent: Rufen Sie die Instanz der übergeordneten Komponente ab🎜🎜$children: Rufen Sie die Instanz der untergeordneten Komponente ab🎜🎜🎜🎜 Anwendungsbeispiel: 🎜🎜

methods: {
  increment() {
    this.$data.count++ // 访问数据对象
  }
},
mounted() {
  this.$on('my-event', this.handleEvent) // 监听事件
},
created() {
  console.log(this.$root) // 获取根实例
}

🎜Mithilfe des $-Symbols können Entwickler einfach auf Instanzstatus, Ereignisse und Verhalten in Vue-Komponenten zugreifen und diese bearbeiten. 🎜

Das obige ist der detaillierte Inhalt vonDie Rolle des $-Symbols in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!