vue中的 ref 和 $refs还有$nextTick()

最新推荐文章于 2024-01-08 11:01:39 发布

秋霜梦红尘

最新推荐文章于 2024-01-08 11:01:39 发布

阅读量942

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_39668938/article/details/105481921

版权

旧专栏专栏收录该内容

153 篇文章 0 订阅

订阅专栏

vue中的 ref 和 refs还有nextTick()

平时获取dom的方法：

$("#id").text('xxx')   // 使用Jquery
document.getElementById("id")  // 使用原生Dom

vue获取dom的方法：
官网解释：
在这里插入图片描述 下面用两个例子来深入理解ref和refs

一、ref作用于组件

<div id="app">
    <navbar></navbar>
    <pagefooter></pagefooter>
</div>
Vue.component('navbar',{
    template:'#navbar',
    data:function () {
        return {
            navs:[]
        }
    }
});

Vue.component('pagefooter',{
    template:'#pagefooter',
    data:function () {
        return {
            footer:''
        }
    }
});
new Vue({
    el:'#app',
    mounted:function () {
        //ready,
        //这里怎么直接访问navbar的navs和pagefooter的footer值呢，
    }
})

这就用到ref了
修改组件

<div id="app">
    <navbar ref="navbar"></navbar>
    <pagefooter ref="pagefooter"></pagefooter>
</div>
new Vue({
    el:'#app',
    mounted:function () {
        //ready,
        //这里怎么直接访问navbar的navs和pagefooter的footer值呢，
        console.log(this.$refs.navbar.navs);
        console.log(this.$refs.pagefooter.footer);
    }
})

通过ref和refs，父组件可以轻松获取子组件的信息。很简单!

二、ref作用于Html标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <p ref="thisP">{{name}}</p></div>
<script>
  var vm = new Vue({
    data:{
      name:'小小陈先森'
    }
  }).$mount("#app")

 // vm.name='Tom';
  console.log(vm.$refs.thisP.textContent);
  //vm.$nextTick(function () {
  //  console.log(vm.$refs.thisP.textContent);
  //})
</script>
</body>
</html>

上面这个例子可以获取P标签中的文本信息。这样就不需要给P标签设一个id，再document.getElementById('xx)，这相当麻烦。

三、$nextTick()

<script>
  var vm = new Vue({
    data:{
      name:'小小陈先森'
    }
  }).$mount("#app")

  vm.name='Tom';
  console.log(vm.$refs.thisP.textContent);
  vm.$nextTick(function () {
    console.log(vm.$refs.thisP.textContent);

  })

</script>

在这里插入图片描述
控制台显示

看控制台输出，明明给name赋值‘Tom’，为啥还会打印出‘小小陈先森’。name赋值‘Tom’没错，但更新到Dom这个过程是异步的(根本原因是因为Vue中DOM更新是异步的).

所以当你打印console.log(vm.$refs.thisP.textContent);时，此时标签的文本内容还是‘小小陈先森’。

但我想获取Dom更新的数据啊，我想获取到的是’Tom’。怎么办？

使用Vue.nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM.

this.$nextTick(()  => {
    console.log(vm.$refs.thisP.textContent);
  })

秋霜梦红尘

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue中的 ref 和 $refs还有$nextTick()

vue中的 ref 和 refs还有nextTick()平时获取dom的方法：$("#id").text('xxx') // 使用Jquerydocument.getElementById("id") // 使用原生Domvue获取dom的方法：官网解释：下面用两个例子来深入理解ref和refs一、ref作用于组件<div id="app"> <n...
复制链接

扫一扫