vue中的ref属性

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

xm2by

9188人浏览 · 2018-07-12 09:58:20

xm2by · 2018-07-12 09:58:20 发布

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值获取的结果打印出来。如图：
这里写图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^