Vue实例方法

àì夳堔傛蜴生んèń 2021-12-22 11:17 322阅读 0赞

这次我们介绍Vue实例提供的一些有用的属性和方法，这些属性和方法名都以前缀$开头。

**一、实例属性**

**1.组件树访问**

*  　$parent  用来访问当前组件实例的父实例
 *  　$root  用来访问当前组件树的根实例，如果当前组件没有父实例，$root表示当前组件实例本身
 *      $children  用来访问当前组件实例的直接组件实例

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

**2.DOM访问**

*  　$el   用来访问挂载当前组件实例的DOM元素。
 *  　$els   用来访问$el元素中使用了v-el指令的DOM元素

**3.数据访问**

*  　$data   用来访问组件实例观察的数据对象，该对象引用组件实例化时选项中的data属性
 *  　$options  用来访问组件实例化时的初始化选项对象

**二、实例方法**

**1.实例DOM方法的使用**

1.  .$appendTo()  它用来将el所指的DOM元素或片段插入到目标元素中。该方法接受两个参数：

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

2.  $before() 它用来将el所指的DOM元素或片段插入到目标元素之前。该方法接受两个参数：

*   *  elementOrSelector（字符串或DOM元素），该参数可以是一个选择器字符串或者DOM元素。
     *  callback（可选，函数），回调函数

3. $after() 它是用来将el所指的DOM元素或片段插入到目标元素之后。该方法接受两个参数，同上

4. $remove()  它是用来将el所指的DOM元素或片段从DOM中删除。该方法接受一个参数

*   *  callbak（可选参数）同上

5.$nextTick（） 它是用来在下次DOM更新循环后执行指定的回调函数，使用该方法可以保证DOM中的内容已经与最新数据保持同步。该方法接受一个参数：

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

**2.实例Event方法的使用**

1.$on() 该方法用来监听实例上的自定义事件。该方法接受两个参数：

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

2.$once() 该方法也是用来监听实例上的自定义事件，但只触发一次。该方法接受两个参数 。同$on

3.$emit() 该方法用来触发事件。接受两个参数

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

4.$dispatch() 该方法用来派发事件，即先在当前实例触发，再沿着父链一层一层向上，如果对应的监听函数返回false就停止。该方法接受两个参数：同$emit()

5.$broadcast() 该方法用来广播事件，即遍历当前实例的$children，如果对应的监听函数返回false就停止。该方法接受两个参数：同$emit()

6.$off() 该方法用来删除事件监听器。该方法接受两个参数：同$on()

转载于:https://www.cnblogs.com/yc-1314/p/10314504.html

发表评论取消回复

表情：

评论列表（有 0 条评论，322人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue实例方法/生命周期

Vue实例方法/声明周期 * vm.$mount( \[elementOrSelector\] ) * vm.$forceUpdate() * vm.$n...

- 日理万妓/ 2024年04月17日 05:58/ 0 赞/ 77 阅读

相关 Vue实例方法/事件

Vue实例方法/事件 * vm.$on( event, callback ) * vm.$once( event, callback ) * vm.$of...

布满荆棘的人生/ 2024年04月17日 05:58/ 0 赞/ 76 阅读

相关 Vue实例方法/数据

Vue实例方法/数据 * vm.$watch( expOrFn, callback, \[options\] ) * * unwatch() * vm...

亦凉/ 2024年04月17日 05:57/ 0 赞/ 73 阅读

相关 Vue--使用lodash--方法/实例

原文网址：[Vue--使用lodash--方法/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_lodash--_IT_-CSDN] 简介本文介绍Vue整合l

心已赠人/ 2023年09月29日 17:11/ 0 赞/ 11 阅读

相关 Vue--整合SVG Icon图标--方法/实例

原文网址：[Vue--整合SVG Icon图标--方法/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_SVG Icon_--_IT_-CSDN] 简介说明

ゞ浴缸里的玫瑰/ 2023年09月28日 20:51/ 0 赞/ 41 阅读

相关前端学习日记Vue：Vue的实例属性与实例方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

今天药忘吃喽~/ 2023年06月07日 03:28/ 0 赞/ 15 阅读

相关 Vue之实例方法set使用

<template> <div id="root"> <!-- <p v-for="item in names" :key="item">{

浅浅的花香味﹌/ 2022年04月18日 01:50/ 0 赞/ 203 阅读

相关 Vue实例的属性和方法

一、Vue之实例属性 ![image.png][] > `Vue` 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 `$`，以便与代理的数据属性区分组件

阳光穿透心脏的1/2处/ 2022年02月18日 10:59/ 0 赞/ 421 阅读

相关 Vue实例方法

　　这次我们介绍Vue实例提供的一些有用的属性和方法，这些属性和方法名都以前缀$开头。一、实例属性 1.组件树访问　$parent 用来访问当前组件实例的父实

àì夳堔傛蜴生んèń/ 2021年12月22日 11:17/ 0 赞/ 323 阅读

相关 Vue实例属性和实例方法

目录一，常用的实例属性：二，常用的实例方法： 1，实例方法set ，delete 2，实例方法watch 3，实例方法-生命周期 -------------

末蓝、/ 2021年07月25日 12:34/ 0 赞/ 550 阅读