一、实例属性
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(可选,函数),对应的回调函数。
如果没有参数,即删除所有的事件监听器;
如果只提供一个参数——事件名称,即删除它对应的所有监听器;
如果提供两个参数——事件名称和回调函数,即删除对应的这个回调函数。