Vue实例方法

本文详细介绍了Vue.js中实例的属性与方法,包括组件树访问、DOM访问、数据访问等实例属性,以及实例DOM方法如$appendTo、$before、$after、$remove和$nextTick的使用,还有实例Event方法如$on、$once、$emit、$dispatch和$broadcast的用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、实例属性

 

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(可选,函数),对应的回调函数。

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值