Vue实例方法

àì夳堔傛蜴生んèń 2021-12-22 11:17 301阅读 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 条评论，301人围观）

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

相关阅读

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

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

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

相关 Vue实例方法/事件

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

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

相关 Vue实例方法/数据

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

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

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

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

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

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

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

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

相关 Vue之实例方法set使用

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

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

相关 Vue实例的属性和方法

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

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

相关 Vue实例方法

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

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

相关【vue】学习笔记七：vue实例生命周期、数据方法

文章目录 @\[TOC\] 生命周期流程图创建期间的生命周期函数运行期间的生命周期函数销毁期间的生命周期函数特殊生命周期钩子常用vue实例数据与方法

刺骨的言语ヽ痛彻心扉/ 2021年09月21日 02:42/ 0 赞/ 515 阅读

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

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

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