Fade away

Appearance

实例属性和方法 ​

1.实例属性 ​

$data ​

类型：Object

Vue 实例观察的数据对象。Vue 实例代理了对其配置项data对象中属性的访问。

$props ​

类型：Object

当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象 property 的访问。

类型：Object

$el ​

类型：Element

只读

当前组件的根dom元素

$options ​

类型：Object

只读

用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处：

js
new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})

$parent ​

类型：Vue instance

只读

当前组件的父组件实例，如果有父组件

$root ​

类型：Vue instance

只读

当前组件的根组件实例。如果当前实例没有父实例，此实例将会是其自己。

$children ​

类型：Array<Vue instance>

只读

当前实例的直接子组件。**需要注意 $children 并不保证顺序，也不是响应式的。**如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

$slots ​

类型：{ [name: string]: ?Array<VNode> }

只读

可获取父组件传来的插槽内容

vue
<template>
    <div>
        <Child>
            <h2>123</h2>
            <h2 slot="asd">456</h2>
        </Child>
    </div>
</template>
vue
<template>
<div>
    <slot></slot>
    <slot name="asd"></slot>
    </div>
</template>

<script>
    export default {
        mounted(){
            console.log(this.$slots.default)
            console.log(this.$slots.asd)
        }
    }
</script>

$scopedSlots ​

类型：{ [name: string]: props => Array<VNode> | undefined }

只读

用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。

vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。

注意：从 2.6.0 开始，这个 property 有两个变化：

  1. 作用域插槽函数现在保证返回一个 VNode 数组，除非在返回值无效的情况下返回 undefined。
  2. 所有的 $slots 现在都会作为函数暴露在 $scopedSlots 中。如果你在使用渲染函数，不论当前插槽是否带有作用域，我们都推荐始终通过 $scopedSlots 访问它们。这不仅仅使得在未来添加作用域变得简单，也可以让你最终轻松迁移到所有插槽都是函数的 Vue 3。

$refs ​

类型：Object

只读

用来获取dom元素，或者组件实例

vue
<template>
	<div ref="box"></div>
	<Child ref="child"/>
</template>

<script>
export default {
	components {
		Child
	},
	mounted() {
    	console.log(this.$refs.box)
    	console.log(this.$refs.child)
	},
}
</script>

$isServer ​

类型：boolean

只读

当前 Vue 实例是否运行于服务器。用于服务端渲染

$attrs ​

类型：{ [key: string]: string }

包含了父组件传递给子组件的所有属性（如 HTML 属性或自定义属性），但class 和 style 除外，但这些属性在子组件内部没有被声明为 props。

可以通过v-bind="$attrs"，将当前组件的$attrs传递给当前组件的子组件

vue
<Child name="child" :value="666" age="18"> </Child>
vue
<template>
	<div></div>
</template>

<script>
export default {
	props: {
		name: String,
	},
	mounted() {
		console.log(this.$attrs)  // {value: 666, age: '18'}   
        // 并不包含name，因为name被props接受
	},
}
</script>

$listerens ​

类型：{ [key: string]: Function | Array<Function> }

只读

包含了父组件中给当前组件绑定的自定义事件 (不含 .native 修饰器的) ，

可以通过v-bind="$listerens"，将当前组件的$listerens传递给当前组件的子组件

2.实例方法-数据 ​

$watch() ​

监听器，相当于组件实例的watch配置项

js
vm.$watch(
    expOrFn: String | Function,
    callback(newVal, oldVal):Function | Object,
    [options]: Object
)

参数：

  • expOrFn：需要监听的数据，可以是一个键路径，也可以是个方法返回一个需要监听的数据：()=>this.name
  • callback：监听的数据改变之后的回调
    • newVal：数据改变后的新值
    • oldVal：数据改变前的旧值
  • options：配置参数
    • deep：boolean：是否深度监听
    • immediate: boolean：组件挂载先默认执行一次

返回值：{Function} unwatch

js
// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做点什么
})

// 函数
vm.$watch(
  function () {
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用。
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做点什么
  }
)

vm.$watch 返回一个取消观察函数，用来停止触发回调：

js
var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()

$set() ​

用于给一个数组或对象设置一个新值

通常用于使用下标修改数组的值，或者给对象添加一个新键之后

js
vm.$set(
    target: Object | Array,
    propertyName/index: string | number,
    value: any
)

参数：

  • target：对象或数组的名
  • propertyName/index：对象的键名，或数组的下标
  • value：新值

返回值：返回设置的value

这是全局 Vue.set 的别名。

$delete() ​

删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制，但是你应该很少会使用它。

js
vm.$delete( 
    target: Object | Array,
    propertyName/index: string | number
)

参数：

  • target：一个对象或者数组
  • propertyName/index：对象的键或者数组的下标

3.实例方法-事件 ​

$on() ​

监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

js
vm.$on(
    event: string | Array<string>,
    callback: Function
)

参数：

  • event：事件名，一个字符串或者字符串类型的数组
  • callback：触发事件的回调
js
vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"

$once() ​

监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

js
vm.$once(
    event: string | Array<string>,
    callback: Function
)

参数：

  • event：事件名，一个字符串或者字符串类型的数组
  • callback：触发事件的回调

$off() ​

移除自定义事件监听器。

js
vm.$off(
    [ event: string | Array<string> ],
    [ callback: Function ]
)

参数：

  • 如果没有提供参数，则移除所有的事件监听器；
  • 如果只提供了事件，则移除该事件所有的监听器；
  • 如果同时提供了事件与回调，则只移除这个回调的监听器。

$emit() ​

触发当前实例上的事件。附加参数都会传给监听器回调。

js
vm.$emit(
    eventName: string,
    [...args]
)

参数：

4.实例方法-声明周期 ​

$mount() ​

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。

这个方法返回实例自身，因而可以链式调用其它实例方法。

js
vm.$mount( [elementOrSelector]:Element | string )

参数：

  • elementOrSelector：一个组件或者dom选择器

返回值：返回vm自身

js
var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

$forceUpdate() ​

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

js
vm.$forceUpdate()

$nextTick() ​

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

js
vm.$nextTick([callback])

参数：

  • callback：下次 DOM 更新循环后的回调

$destory() ​

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

触发 beforeDestroy 和 destroyed 的钩子。

js
vm.$destroy()

TIP

在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。

MIT Licensed

Copyright © 2024-present xarzhi