vue中的ref属性

最新推荐文章于 2024-06-11 17:08:03 发布

xm2by

最新推荐文章于 2024-06-11 17:08:03 发布

阅读量9k

点赞数 6

分类专栏： vue 文章标签： ref

本文链接：https://blog.csdn.net/XuM222222/article/details/81010822

版权

vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

vue中的ref属性

使用vue开发时经常会用到ref属性，ref属性有什么作用呢？我刚开始用的时候发现这个属性有点鸡肋，总是感觉可有可无，但是随着不断的使用vue，慢慢地发现它的作用还是挺重要的，比如：有时候我们想在父组件中调用子组件的方法或属性，这个时候该怎么做呢？可以通过为子组件设置ref，然后通过this.$refs.refName（refName为子组件的ref值）获取到子组件，然后就可以随意调用子组件的方法和属性了。又比如：有时候我们想操作子组件或HTML标签的DOM，在vue中我们几乎不使用class或id来获取元素的DOM，这个时候该怎么做呢？可以为子组件或想要操作的DOM标签添加ref属性，然后通过this.$refs.refName.$el或者this.$refs.refName来获取DOM。

那么在使用ref时要注意什么呢？

根据ref使用的对象不同，获取到的结果也是不一样的：

<1> 自定义组件使用ref属性，通过ref值可获取到该自定义组件；

<2> 普通HTML标签使用ref属性，通过ref值获取到的是该标签对应的DOM；

举个demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
      <hello ref="hello"></hello>
      <div ref="div"></div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        const Hello = {
            template: '<h1>Hello, {{name}}</h1>',
            data(){
                return {
                    name: 'Ryan',
                }
            },
        }
        const app = new Vue({
            el: '#app',
            components: {
              Hello,
            },
            mounted() {
                console.log(this.$refs, this.$refs.hello, this.$refs.div);
            },
        })
    </script>
</body>
</html>

demo中，分别为自定义组件Hello和div标签设置ref属性，并在DOM挂载后将使用ref值获取的结果打印出来。如图：
这里写图片描述

xm2by

关注

6
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
vue中的ref属性

vue中的ref属性使用vue开发时经常会用到ref属性，ref属性有什么作用呢？我刚开始用的时候发现这个属性有点鸡肋，总是感觉可有可无，但是随着不断的使用vue，慢慢地发现它的作用还是挺重要的，比如：有时候我们想在父组件中调用子组件的方法或属性，这个时候该怎么做呢？可以通过为子组件设置ref，然后通过this.$refs.refName（refName为子组件的ref值）获取到子组件，然...
复制链接

扫一扫