在Vue.js中,带的 $ 符号用于表示 Vue实例的属性和方法。
这些属性和方法是Vue框架内部定义的,主要用于方便开发者在组件内部访问和使用。
常见的带$的属性和方法:
- $data:用于访问组件的内部数据对象,包含组件内定义的所有响应式数据。
- $props:用于访问从父组件传递到子组件的属性。
- $el:用于访问组件挂载的根DOM元素。
- $options:用于访问组件实例的初始化选项,包括data、props等。
- $refs:包含所有具有ref特性的DOM元素或子组件实例,可以通过它来获取对应的组件实例或DOM元素。
- $parent:表示当前实例的父实例。
- $children:表示当前实例的子实例数组。
- $emit:用于在子组件中触发事件,通知父组件某些事件的发生。
- $on:用于监听当前实例上的自定义事件。
- $nextTick:在下一次DOM更新循环结束之后执行延迟回调,常用于在数据更新后操作DOM。
- $watch:用于观察数据的变化,当数据发生变化时,会触发指定的回调函数。
- $router(如果使用Vue Router):表示Vue Router实例对象,用于实现页面跳转等路由操作。
- $store(如果使用Vuex):表示Vuex状态管理实例,用于访问和管理应用的状态。
使用场景和示例
- data和props:在组件的
data
函数和props
数组中定义数据和属性,然后在组件的方法中通过this.$data
和this.$props
访问这些数据和属性。 - emit和on:在子组件中使用
this.$emit
触发事件,在父组件中使用 v-on 或 @ 监听这些事件。