美文网首页
vue中的 ref 和 $refs

vue中的 ref 和 $refs

作者: 前程明亮 | 来源:发表于2018-11-23 01:03 被阅读97次

你应该学过jquery吧,没用vue之前,我前端框架是用JS+Jquery+Bootstrap,因为不是数据驱动,为了获取某些元素的value,我常常会使用Jquery.


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

现在我们牛逼了,我们用vue。那vue中,如果我要获取Dom,该怎么做?
这就进入本文的主题ref, $refs,官网解释:


官网解释

下面用两个例子来深入理解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);
  })

相关文章

  • Vue中获取dom元素之ref

    ref Vue中可以通过ref属性绑定Dom元素,通过this.$refs获取页面中的Dom元素 例:

  • vue中的 ref 和 $refs

    你应该学过jquery吧,没用vue之前,我前端框架是用JS+Jquery+Bootstrap,因为不是数据驱动,...

  • VUE is ref 和 $refs

    is关键字 先看一段代码 看展示的源码发现一个问题:hello world 代码中定义在表格内的,实际上显示在表格...

  • vue ref 和 refs

    起因是要用到element 里面table的方法 想用其中的clearFilter(),却不知道怎么调用,查了一下...

  • 7.Vue 操作dom

    Vue操作dom: 在Vue中获取dom,需要在dom上使用ref="名称",然后通过:this.$refs.名称...

  • 详解vue中的ref和$refs的使用

    这篇文章主要介绍了vue中的ref和refs的使用,文中通过示例代码介绍的非常详细。 ref:被用来给元素或子组件...

  • Vue父组件调用子组件的方法

    vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method...

  • vue中ref($refs)用法和作用

    ref有三种用法: 1、ref 加在普通元素上,用this.$refs.name 获取到的是dom元素 2、ref...

  • Vue - ref和$refs用法

  • temp

    vue中,根据屏幕不同设置子组件的高度,ref、$refs、props vue组件页面高度根据屏幕大小自适应 vu...

网友评论

      本文标题:vue中的 ref 和 $refs

      本文链接:https://www.haomeiwen.com/subject/mdkdqqtx.html