一、本文简介
在Vue.js中,$
符号通常用于表示Vue实例或组件上的内置属性和方法,这些被称为“实例属性”或“实例方法”。以下是一些常见的以$
开头的Vue实例属性和方法
1.1、实例属性
序号 | 实例属性 | 解释 |
1 | $data | Vue实例的数据对象,用于存储组件的响应式数据。this.$data.someData 用于访问Vue实例中定义的someData 数据。 |
2 | $props | 虽然Vue没有直接名为‘props的实例属性, 但props是组件用于接收父组件传递的数据的选项。 在组件内部,可以通过this.propName`来访问传递的prop值。 在子组件中,this.$props.someProp 用于访问从父组件传递下来的someProp |
3 | $el | Vue实例或组件的根DOM元素。this.$el 可以用来直接访问或操作Vue实例的根DOM元素 |
4 | $refs | 一个对象,包含了所有带有ref 属性的子组件和DOM元素的引用。通过 ref 属性可以在Vue模板中给元素或子组件注册引用信息,然后通过$refs 访问它们。this.$refs.myRef 用于访问模板中ref="myRef" 的元素或子组件。 |
5 | $options | 包含了当前Vue实例的初始化选项。 这些选项是在创建Vue实例时传递给Vue构造函数的参数。 this.$options.someOption 用于访问在创建Vue实例时定义的someOption 。 |
6 | $parent | 当前组件的父组件实例。如果当前组件没有父组件实例,则为undefined 。在子组件中, this.$parent 可以用来访问父组件的实例和数据。 |
7 | $children | 当前组件的直接子组件实例数组。注意,这并不是一个响应式数组,修改这个数组不会触发更新。this.$children 可以用来遍历当前组件的所有直接子组件实例。 |
8 | $root | 当前组件树的根Vue实例。如果当前实例没有父实例,此实例将会是其自己。this.$root 可以用来访问整个组件树的根实例。 |
9 | $slots | 包含了当前组件插槽的内容。这是一个非常有用的属性,用于在组件内部访问和操作插槽内容。this.$slots.default 用于访问默认插槽的内容。 |
10 | $scopedSlots | 与$slots 类似,但用于作用域插槽。它包含了传递给组件的作用域插槽内容,允许你访问插槽的props。在组件内部,可以通过 this.$scopedSlots.someSlot({ someProp: 'value' }) 来渲染作用域插槽,并传递props。 |
11 | $attrs | 包含了父作用域中不作为prop被识别(且获取)的绑定属性(class和style除外)。当一个组件没有声明任何prop时,这里会包含所有父作用域的绑定(class和style除外),并且可以通过v-bind="$attrs" 传入内部组件。this.$attrs 可以用来获取并传递没有在组件props中声明的绑定属性。 |
12 | $listeners | 包含了父作用域中的(不含.native修饰器的)v-on事件监听器。它是一个对象,里面包含了作用在当前组件上的所有监听器。this.$listeners 可以用来访问父组件传递下来的所有事件监听器。 |
13 | $vnode | 当前组件的渲染VNode,通常在渲染函数中使用。 |
1.2、实例方法
序号 | 实例方法 | 解释 |
1 | $mount | 手动挂载Vue实例到DOM中。如果没有提供elementOrSelector 参数,模板将被渲染为文档之外的元素,并且你必须使用原生DOM API把它插入文档中。 |
2 | $forceUpdate | 迫使Vue实例重新渲染。注意,这不会更新组件的state。 |
3 | $destroy | 销毁Vue实例,释放它所占用的所有资源,包括数据观测器、计算属性、指令绑定的事件监听器、所有的子实例等。 |
4 | $emit | 触发当前实例上的事件。附加参数都会传给监听器回调。this.$emit('eventName', ...args) 用于触发名为eventName 的事件,并传递参数给事件监听器。 |
5 | $on | 监听当前实例上的自定义事件。 |
6 | $once | 监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。 |
7 | $off | 移除自定义事件监听器。 |
8 | $nextTick | 将回调延迟到下次DOM更新循环结束之后执行。在修改数据之后立即使用这个方法,获取更新后的DOM。 |
9 | $watch | 观察Vue实例上的数据变动。当数据变化时,执行回调函数。 |
10 | $set | 向响应式对象中添加一个属性,并确保这个新属性也是响应式的,且触发视图更新。这是Vue.set的别名。 $set(target, propertyName/index, value) |
11 | $delete | 删除对象的属性。如果对象是响应式的,则确保删除能触发视图更新。这是Vue.delete的别名。 $delete(target, propertyName/index) |
1.3、其他实例
序号 | 实例 | 解释 |
1 | $router | 在Vue应用中使用VueRouter时,‘router`是Vue Router的实例,可用于编程式地导航到不同的URL。 $router 不是 Vue 实例的固有属性,但它是在使用 Vue Router 时,Vue 实例会获得的一个非常重要的对象。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 在 Vue 应用中,当你通过 Vue.use(VueRouter) 安装了 Vue Router 并创建了 VueRouter 的实例后,这个实例会被注入到 Vue 的根实例中,从而使得在整个 Vue 应用中都可以通过 router对象包含了路由的配置和操作方法,如添加路由、导航等。它是VueRouter的实例,一个全局对象,用于控制路由的切换和全局的路由配置。router 对象提供了许多有用的方法和属性,如 |
2 | $store | **store是Vue实例的一个实例属性∗∗,当使用Vuex进行状态管理时,store 是 Vuex 实例的属性,通过它可以访问 Vuex 的状态对象和方法,以进行状态的管理和操作。 具体来说,store是挂载在Vue实例上的(即Vue.prototype),而组件其实也是一个Vue实例。在组件中,可以使用this访问原型上的属性,因此可以通过this.store 访问 Vuex 的状态和方法。在模板中,由于拥有组件实例的上下文,可以直接通过 {{ store.state.xxx }} 访问 Vuex 的状态,这等价于在 script 中的 this.store.state.xxx。 |
1.4、注意事项
1.4.1、这些实例属性和方法通常只能在Vue实例或组件内部使用。
1.4.2、在模板中,可以直接访问这些属性和方法,但在JavaScript代码中,需要通过this
来访问它们。
1.4.3、Vue 3中,对Vue的API进行了一些更改,例如移除了$listeners
属性,并将其功能合并到了$attrs
中,以及引入了Composition API等新特性。因此,在使用Vue的不同版本时,需要注意API的差异。
以上信息基于Vue 2.x和Vue 3.x的通用知识和常见的实践。随着Vue.js的不断发展,可能会有新的属性和方法被引入,或者现有的属性和方法被弃用或修改。因此,建议查阅最新的Vue官方文档以获取最准确和最新的信息。