Home  >  Article  >  Web Front-end  >  The role of the $ symbol in vue

The role of the $ symbol in vue

下次还敢
下次还敢Original
2024-04-30 04:33:141133browse

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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:Can js be used in vue?Next article:Can js be used in vue?