AI问答-Vue实例属性/实例方法：$refs、$emit、$attrs、$props、$data...

news2024/11/18 19:59:22

一、本文简介

在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、其他实例

序号实例解释

$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 来访问这个路由实例。

router对象包含了路由的配置和操作方法，如添加路由、导航等。它是VueRouter的实例，一个全局对象，用于控制路由的切换和全局的路由配置。router 对象提供了许多有用的方法和属性，如 push()、replace()、go() 等用于导航到不同的路由，以及 beforeEach()、beforeResolve()、afterEach() 等路由钩子函数，用于在路由切换前后执行某些操作。

$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。