vue的一些实例属性和方法

vue的实例属性和方法

Vue 实例暴露了一些有用的实例属性与方法。
这些属性与方法都有前缀 $，以便与代理的数据属性区分。

---

---

一、实例属性

DOM访问

vm.$el(只读)

• type: HTMLElement
• 返回当前 Vue 实例正在管理的 DOM 元素。即：渲染出来的html元素

数据访问

vm.$data

• type: Object
• 用来访问Vue 实例观察的数据对象 (data object)。

vm.$options

• type: Object
• 返回当前 Vue 实例所使用的实例化选项。即：实例的配置项
  可指定某一项属性，如：vm.$options.methods

组件树

vm.$parent

• type: Vue
• 返回当前 vm 的父实例（如果存在的话）。

vm.$root

• type: Vue
• 返回当前组件树的根 Vue 实例。如果当前实例已经没有父实例的话将会返回它自己。

vm.$children

• type: Array<Vue>
• 返回当前实例的直接子实例数组。

vm.$refs

• 获取所有带ref指令的子组件

二、实例方法

DOM操作

$appendTo(element | selector, callback)

• type: element HTMLElement | selector String
  callback Function(可选)
• 将el所指的DOM元素插入目标元素

$before(element | Selector, callback)

• type: element HTMLElement | selector String
  callback Function(可选)
• 将el所指的DOM元素或片段插入目标元素之前

$after(element | Selector, callback)

• type: element HTMLElement | selector String
  callback Function(可选)
• 将el所指的DOM元素或片段插入目标元素之后

$remove(callback)

• type: callback Function(可选)
• 将el所指的DOM元素或片段从DOM中删除

$nextTick(callback)

• type: callback Function(可选)
• 延迟回调的执行直到下一次 DOM 更新循环结束。当你改变一些数据之后调用它，当回调触发时 DOM 已经更新完毕。

event方法的使用

监听

vm.$on(event, callback) / $once(event, callback)

• type: event String
  callback Function(可选)
• 在当前 vm 上监听一个（一次性的）事件。

this.$parent.$once('focus', this.getFocus)

触发

vm.$dispatch( event, [args…] ) 和 vm.$broadcast( event, [args…] )

• type: event String
  args… (可选)
• dispatch派发事件，先在当前实例触发，再沿父链一层层向上，对应的监听函数返回false停止
• broadcast广播事件，遍历当前实例的$children，如果对应的监听函数返回false，就停止
  在vue 2.0后，Vue 官网已经不再支持使用 $dispatch 和 $broadcast 进行组件通信；但element-ui框架中对其有封装

vm.$emit( event, [args…] )

• type: event String
  args… (可选)
• 只在当前 vm 上触发一个事件，可与$on配合使用。

vm.$off( [event, callback] )

• type: event String(可选)
  callback Function(可选)