ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。
对于API我们把ref和$refs比较着看。
在这里插入图片描述

说一下我所理解的东西吧！
在学习的过程中，我之前所学的mousemove鼠标滑动事件有点类似，先看mousemove的代码段：

<div id="canvas" v-on:mousemove="updateXY">
            {{x}},{{y}}
</div>

<script>
    new Vue({
        el: '#vue-app',
        data() {
            return {
                age: 30,
                x: 0,
                y: 0
            };
        },
        methods: {
            updateXY(event) {
                // console.log(event);
                this.x = event.offsetX;
                this.y = event.offsetY;
            },
        }
    })
</script>

对于mousemove鼠标滑动事件被监听到生成一个event类型对象，然后我们可以使用对象中包含的属性值，例如以上代码中offsetX，offsetY。然后动态地赋值给x，y。

然后我们来看ref，ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。其中的使用方法和mousemove差不多，引用信息会被注册在$refs，然后我们来调用$refs中的所需要的属性值，下面我们来看利用ref实现双向绑定的例子：

<!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">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue CDN</title>
</head>

<body>
    <div id="vue-app">
        <h1>ref</h1>
        <label>姓名</label>
        <input type="text" ref="name" @keyup="getName" />
        <span>{{name}}</span>
        <label>年龄</label>
        <input type="text" ref="age" @keyup="getAge" />
        <span>{{age}}</span>
    </div>

</body>
<script>
    new Vue({
        el: '#vue-app',
        data() {
            return {
                name: '',
                age: 30,
            };
        },
        methods: {
            getName() {
                // console.log(this.$refs);//$refs相当于ref的父级
                console.log(this.$refs.name.value);
                this.name = this.$refs.name.value;
            },
            getAge() {
                console.log(this.$refs.name.value);
                this.age = this.$refs.age.value;
            },
        }
    })
</script>

</html>

但是我们在使用双向绑定并不使用ref，ref的主要功能是把它标记在里面，可以通过$refs获取到ref的名字，也就是当前这个元素对象，同样也可以获取到整个容器。

冰雪奇缘lb

发布了23 篇原创文章 · 获赞 2 · 访问量 2536

私信关注

特殊属性ref

ref

猜你喜欢