Vue的属性和方法（$符号说明）

Vue的属性和方法

在 Vue.js 中，$ 是一个特殊前缀，用于表示 Vue 实例或 Vue 组件上的内置属性和方法。这些属性和方法被称为“实例属性”或“实例方法”。

以下是一些常见的实例属性和方法：

• $data：Vue 实例的数据对象。
• $props：Vue 组件的 props 对象。
• $el：Vue 实例或组件的根 DOM 元素。
• $refs：一个对象，包含所有具有 ref 属性的子组件和 DOM 元素。
• $options：Vue 实例或组件的选项对象。
• $parent：Vue 实例或组件的父实例或组件。
• $children：Vue 实例或组件的子实例或组件数组。
• $emit：触发当前实例或组件上的自定义事件。
• $on：监听当前实例或组件上的自定义事件。
• $once：监听当前实例或组件上的自定义事件，但只触发一次。
• $off：取消监听当前实例或组件上的自定义事件。
• $nextTick：在下一次 DOM 更新循环结束之后执行延迟回调。

需要注意的是，这些实例属性和方法只能在 Vue 实例或组件内部使用。在模板中，我们可以直接访问这些属性和方法，但在 JavaScript 代码中，我们需要通过 this 来访问它们。例如：

new Vue({
   
  data: {
   
    message: 'Hello World!'
  },
  mounted() {
   
    console.log(this.$data.message) // Hello World!
    console.log(this.$el) // <div id="app">...</div>
    console.log(this.$refs.myInput) // <input ref="myInput" type="text">
  }
})

<div id="app">
  <p>{
  { message }}</p>
  <input ref="myInput" type="text">
</div>

好的，以下是一些常见的实例属性和方法的使用示例：

1. $data：Vue 实例的数据对象。

new Vue({
   
  data: {
   
    message: 'Hello World!'
  },
  created() {
   
    console.log(this.$data.message) // Hello World!
  }
})

1. $props：Vue 组件的 props 对象。

Vue.component('my-component', {
   
  props: ['message'],
  mounted() {
   
    console.log(this.$props.message) // Hello World!
  }
})

new Vue({
   
  el: '#app'
})

<div id="app">
  <my-component message="Hello World!">