详解Vue中$refs和$nextTick的使用方法

目录
  • 1、$refs简介
    • $refs获取DOM元素
    • $refs获取组件对象
  • 2、$nextTick基本使用
    • vue异步更新DOM
    • 利用$nextTick解决以上问题
    • $nextTick使用场景

1、$refs简介

$refs是vue提供的获取真实dom的方法。

$refs获取DOM元素

【使用步骤】：

在原生DOM元素上添加ref属性利用this.$refs获取原生的DOM元素

【代码演示】：

<template>
  <div>
    <h1>获取原生的DOM元素</h1>
    <h4 id="h" ref="myH">我是h4标签</h4>
  </div>
</template>

<script>
export default {
  // 在挂载之后获取原生dom
  mounted() {
    console.log(document.getElementById("h"));
    // this.$refs是vue对象中特有的属性
    console.log(this.$refs.myH);
  },
};
</script>

<style>
</style>

【控制台效果】：

$refs获取组件对象

【代码演示】：

<template>
  <div>
    <h1>获取组件对象</h1>
    <Demo ref="myCom"></Demo>
  </div>
</template>

<script>
import Demo from "@/components/Demo";
export default {
  mounted() {
    console.log(this.$refs.myCom);
    // 获取子组件对象
    let demo = this.$refs.myCom;
    // 调用子组件中的方法
    demo.fn();
  },
  components: {
    Demo,
  },
};
</script>

<style>
</style>

【效果展示】：

2、$nextTick基本使用

$nextTick等待dom更新之后执行方法中的函数体

vue异步更新DOM

【vue异步更新演示】：

<template>
  <div>
    <h1>获取组件对象</h1>
    <Demo ref="myCom"></Demo>
  </div>
</template>

<script>
import Demo from "@/components/Demo";
export default {
  mounted() {
    console.log(this.$refs.myCom);
    // 获取子组件对象
    let demo = this.$refs.myCom;
    // 调用子组件中的方法
    demo.fn();
  },
  components: {
    Demo,
  },
};
</script>

<style>
</style>

【效果演示】:

利用$nextTick解决以上问题

【代码演示】：

<template>
  <div>
    <p>vue异步更新dom</p>
    <p ref="mycount">{{ count }}</p>
    <button @click="add1">点击+1，马上获取数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },

  methods: {
    add1() {
      this.count++;
      // console.log(this.$refs.mycount.innerHTML);

      // 解决异步更新问题
      // dom更新完成之后会顺序执行this.$nextTick（）中的函数体
      this.$nextTick(() => {
        console.log(this.$refs.mycount.innerHTML);
      });
    },
  },
};
</script>

<style>
</style>

【效果演示】：

$nextTick使用场景

【代码演示】：

<template>
  <div>
    <p>$nextTick()使用场景</p>
    <input
      ref="search"
      v-if="isShow"
      type="text"
      placeholder="这是一个输入框"
    />
    <button @click="search">点击-立即搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },

  methods: {
    search() {
      this.isShow = true;
      this.$nextTick(() => {
        this.$refs.search.focus();
      });
    },
  },
};
</script>

<style>
</style>

【效果】：

到此这篇关于详解Vue中$refs和$nextTick的使用方法的文章就介绍到这了,更多相关Vue $refs $nextTick内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue中$refs的用法详解

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

  • Vue中this.$nextTick的作用及用法

    Vue中this.$nextTick的作用及用法

    Vue实现响应式后DOM的变化 data对象中数据改变是如何追踪的? vue将遍历data对象中所有的属性,并通过 Object.defineProperty 把这些属性全部转为 getter/setter:但是我们是没有办法看到 getter/setter的,但是在内部它们让 Vue 能够追踪依赖,在属性被访问和修改时通知变更. 每个组件都对应一个 watcher 实例,它会在组件渲染的过程中把"接触"过的数据属性记录为依赖.之后当依赖项的 setter 触发时,会通知 watche

  • Vue中this.$nextTick()的理解与使用方法

    Vue中this.$nextTick()的理解与使用方法

    目录 this.$nextTick()原理: 1.Vue实现响应式并不是数据发生变化之后DOM立即变化,而是按一定的策略进行DOM的更新. 2.Vue官网 3.等价转换,如果this.$nextTick不起作用时尝试用延时器 4.this.$nextTick的应用场景 5.总结 this.$nextTick()原理: Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之

  • vue中$refs的用法及作用详解

    一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值. 但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行. 然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了 用法如下: HTML: <div id="app"> <input

  • 深入理解vue $refs的基本用法

    我最近在研究vue 的路上,看到了vue $refs的用法,那么今天也算个学习笔记吧! <div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div> <script> new Vue({ el: "#app", metho

  • vue中$nextTick的用法讲解

    vue中$nextTick的用法讲解

    vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架.本人比较喜欢用之.在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过.我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom.因为赋值操作只完成了数据模型的改变并没有完成视图更新.在这个时候我们需要用到本章介绍的函数. 虽然 Vue.js 通常鼓励开发人员沿着"数据驱动"的方式思考,避免

  • 详解Vue中$refs和$nextTick的使用方法

    详解Vue中$refs和$nextTick的使用方法

    目录 1.$refs简介 $refs获取DOM元素 $refs获取组件对象 2.$nextTick基本使用 vue异步更新DOM 利用$nextTick解决以上问题 $nextTick使用场景 1.$refs简介 $refs是vue提供的获取真实dom的方法. $refs获取DOM元素 [使用步骤]: 在原生DOM元素上添加ref属性利用this.$refs获取原生的DOM元素 [代码演示]: <template> <div> <h1>获取原生的DOM元素</h1

  • 详解Vue中的MVVM原理和实现方法

    下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图.视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新 一.思路整理 实现的流程图: 我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点: 1.实现一个数据监听Observer,对数据对象的所有属性进行监听,数据发生变化可以获取到最新值通知订阅者. 2.实现一个解析器Compi

  • 详解vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _se

  • 详解vue跨组件通信的几种方法

    在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件.管理他们之间的状态就成了问题. props双向绑定 通过 sync 双向绑定,属性变化会同步到所有组件,这也是最简单的实现方式,缺点是属性会比较多.实现方式如下 App.vue 文件 <template> <div id="app"> <mask :hide-mask.sync="hideMask"></mask> <

  • 详解Vue 动态添加模板的几种方法

    以下方法只适用于 Vue1.0 版本,推荐系数由高到低排列. 通常我们会在组件里的 template 属性定义模板,或者是在 *.vue 文件里的 template 标签里写模板.但是有时候会需要动态生成模板的需求,例如让用户自定义组件模板,或者设置组件的布局. 例如要做一个类 select 的组件,用户传入 options 数据,通过 value prop 获取选中值,最基本的原型如下. Vue.component('XSelect', { template: ` <div class="

  • 详解Vue中watch对象内属性的方法

    vue提供了watch方法,用于监听实例内data数据的变化.通常写法是: new Vue({ data: { count: 10, blog:{ title:'my-blog', categories:[] } }, watch: { count: function (newval, oldVal) { console.log(`new: %s, old: %s`, newVal, oldVal); } } }) 上述情况里data中的count属性可以直接监听,但是如果需要监听的数据是对象内

  • 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

    如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}

  • 详解vue高级特性

    Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平. 一.watch进阶 从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用: watch:{ a(){ //doSomething } } 实际上,Vue对watch提供了很多进阶用法. handler函数 以对象和handler函数的方式来定义一个监听属性,handler就是处理监听变动时的函数: watch:{ a:{ handler:'doSomething' } }, methods:{ doSomet

  • 详解vue中在父组件点击按钮触发子组件的事件

    我把这个实例分为几个步骤解读: 1.父组件的button元素绑定click事件,该事件指向notify方法 2.给子组件注册一个ref="child" 3.父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg  4.子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中 父组件 <template> <div id="app&qu

  • 详解vue组件之间相互传值的方式

    概述 我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. 但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题.在 vue 中组件之间的关系有:父子,兄弟,隔代.针对不同的关系,怎么实现数据传递,就是接下来要讲的. 一.父组件向子组件传值 即父组件通过属性的方式向子组件传值,子组件通过 props 来接收

随机推荐