Vue实例方法

一、实例属性

 

1、组件树访问

（1）$parent——用来访问当前组件实例的父实例。

（2）$root——用来访问当前组件树的根实例，如果当前组件没有父实例，$root表示当前实例本身。

（3）$children——用来访问当前组件实例的直接子组件实例。

（4）$refs——用来访问使用了v-ref指令的子组件。

2、DOM访问

（1）$el——用来访问挂载当前组件实例的DOM元素。

（2）$els——用来访问$el元素中使用了v-el指令的DOM元素。

3、数据访问

（1）$data——用来访问组件实例观察的数据对象，该对象引用组件实例化时选项中的data属性。

（2）$options——用来访问组件实例化时的初始化选项对象。

二、实例DOM方法的使用

1、$appendTo()——用来将el所指的DOM元素或片段插入到目标元素中

该方法接受两个参数：

• elementOrSelector（字符串或DOM元素），该参数可以是一个选择器字符串或者DOM元素。
• callback（可选，函数），回调函数，该回调函数会在el元素被插入到目标元素后被触发。

注：如果在el上应用了过渡效果，则回调会在过渡完成后触发。

2、$before()——将el所指的DOM元素或片段插入到目标元素之前。

该方法接受两个参数：

• elementOrSelector（字符串或DOM元素），该参数可以是一个选择器字符串或者DOM元素。
• callback（可选，函数），回调函数，该回调函数会在el元素被插入到目标元素后被触发。

注：如果在el上应用了过渡效果，则回调会在过渡完成后触发。

3、$after()——用来将el所指的DOM元素或片段插入到目标元素之后。

该方法接受两个参数：

• elementOrSelector（字符串或DOM元素），该参数可以是一个选择器字符串或者DOM元素。
• callback（可选，函数），回调函数，该回调函数会在el元素被插入到目标元素后被触发。

注：如果在el上应用了过渡效果，则回调会在过渡完成后触发。

4、$remove()——用来将el所指的DOM元素或片段从DOM中删除。

该方法接受一个参数：

• callback（可选，函数），回调函数，该回调函数会在el元素被插入到目标元素后被触发。

注：如果在el上应用了过渡效果，则回调会在过渡完成后触发。

5、$nextTick()——用来在下次DOM更新循环后执行指定的回调函数，使用该方法可以保证DOM中的内容已与最新数据保持同步。

该方法接受一个参数：

• callback（可选，函数），回调函数，该回调函数会在下次DOM更新循环后被执行。它和全局的Vue.nextTick方法一样，不同的是，callback中的this会自动绑定到回调它的Vue实例上。

三、实例Event方法的使用

 

1、$on()——用来监听实例上的自定义事件。

该方法接受两个参数：

• event（字符串），该参数可以是一个事件名称。
• callback（函数），回调函数，该回调函数会在执行$emit、$broadcast、或者$dispatch后触发。

2、$once()——用来监听实例上的自定义事件，但只触发一次。

该方法接受两个参数：

• event（字符串），该参数可以是一个事件名称。
• callback（函数），回调函数，该回调函数会在执行$emit、$broadcast、或者$dispatch后触发。

3、$emit()——用来触发事件

该方法接受两个参数：

• event（字符串），该参数可以是一个事件名。
• args（可选），传递给监听函数的参数。

4、$dispatch()——用来派发事件，即先在当前实例触发，再沿着父链一层一层向上，如果对应的监听函数返回false就停止。

该方法接受两个参数：

• event（字符串），该参数可以是一个事件名。
• args（可选），传递给监听函数的参数。

5、$broadcast()——用来广播事件，即遍历当前实例的$children，如果对应的监听函数返回false就停止。

该方法接受两个参数：

• event（字符串），该参数可以是一个事件名。
• args（可选），传递给监听函数的参数。

6、$off()——用来删除事件监听。

该方法接受两个参数：

• event（字符串），该参数可以是一个事件名称。
• callback（可选，函数），对应的回调函数。

如果没有参数，即删除所有的事件监听器；

如果只提供一个参数——事件名称，即删除它对应的所有监听器；

如果提供两个参数——事件名称和回调函数，即删除对应的这个回调函数。