The role of the $ symbol in vue

The

$ symbol represents the current instance in Vue, providing access to instance properties, event bus, life cycle hooks and special functions, including accessing data objects, triggering and listening to events, obtaining instance references and inspecting root instances .

The role of the $ symbol in Vue

In Vue.js, the $ symbol is a special variable. Represents the current instance being operated on. It provides access to:

1. Instance properties and methods

• $data: The data object of the instance
• $props: The property object of the instance
• $methods: The method object of the instance
• $computed: Computed property object
• $watch: Monitoring property object

2. Event bus

• $emit: Trigger event
• $on: Listen for event
• $once: Listen for event (only trigger Once)
• $off: Remove event listener

3. Life cycle hook

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

4. Other functions

• $root: Get the root Vue instance
• $refs: Access the reference of the component
• $parent: Get the parent component instance
• $children : Get sub-component instance

Usage example:

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

Using the $ symbol, developers can easily access and manipulate instance status and events in Vue components and behavior.

The above is the detailed content of The role of the $ symbol in vue. For more information, please follow other related articles on the PHP Chinese website!