Vue中ref 如何使用

发布时间：2021-07-22 13:57:39 作者：Leah
来源：亿速云阅读：214

这篇文章给大家介绍Vue中ref 如何使用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

一、虚拟 DOM
在我们使用 JS/Jquery 直接对 DOM 元素进行操作时，不管是对元素样式的修改（背景颜色从红色变成蓝色）还是对页面中的某些布局进行动态调整（通过点击按钮在列表中添加一行新的数据），这都会造成页面的重新渲染，从而影响我们网站的性能。而在 Vue 中，通过在内存中生成与真实 DOM 与之对应的数据结构（虚拟 DOM），当页面发生变化时，通过新的虚拟 DOM 树与旧的虚拟 DOM 树进行比对，就能很快的找出差异点，从而得出应施加到真实 DOM 上的改动。
Vue中ref 如何使用

二、使用 ref 获取页面 DOM 元素
在使用 JS/Jquery 获取页面的 DOM 元素时，我们一般是根据 id、class、标签、属性等其它标识来获取到页面上的 DOM 元素。嗯，可以说，我们很难抛弃 Jquery 的一个重大原因，就是当我们需要获取到页面上的 DOM 元素时，使用 Jquery 的 API 相比于原生的 JS 代码，简单到极致，有木有。

`1`	`document.getElementById('id').value => $('#id').val()`

        那么，难道我们在 Vue 中获取 DOM 元素还是采用这样的方式？
        答案当然是否定的，这种直接操纵 DOM 元素的方式，与我们使用 Vue 的初衷不符，虽然能达成效果，但是却不提倡，这里我们就可以使用 ref 来获取页面上的 DOM 元素。
        在下面的代码中，我在 input 上添加了一个 ref 属性，之后，我们就可以在 Vue 实例中获取到这个 input 输入框的值。这里，我在 beforeMount、mounted 这两个 Vue 中的生命周期钩子函数以及一个按钮的点击事件中尝试获取到这个 input 输入框的值。

<div id="app">
    <input type="text" ref="msgText" v-model="msg" />
    <button @click="getElement">获取元素值</button>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: 'Hello ref'
        },
        beforeMount() {
            console.log('beforeMount: ' + this.$refs.msgText.value)
        },
        mounted() {
            console.log('mounted: ' + this.$refs.msgText.value)
        },
        methods: {
            getElement() {
                console.log(this.$refs.msgText.value)
            }
        }
    });
</script>

Vue中ref 如何使用
运行代码，从结果中可以看到，在 beforeMount 这个钩子函数中，我们是无法获取到这个 DOM 元素的值，结合之前学习的 Vue 生命周期的相关知识，当执行到 beforeMount 钩子函数时，Vue 虽然已经将模板编译完成，但是尚未挂载到页面 DOM 元素上，因此我们可以得出 ref 是在页面渲染完成后才被创建的。
Vue中ref 如何使用
可以看到，当我们在 input 输入框中添加了 ref 属性后，在当前的 Vue 实例的 $.refs 上就挂载了当前的 input 框对象。

三、使用 ref 获取子组件对象
同使用 ref 获取页面的 DOM 元素相似，当我们需要获取子组件时，只需要将使用到子组件上的地方添加 ref 属性即可。在下面的示例代码中，我添加了一个子组件，当我们点击 Vue 实例上的按钮时，会先调用子组件的方法，然后获取子组件的数据。

<div id="app">
    <input type="text" ref="msgText" v-model="msg" />
    <button @click="getElement">获取元素值</button>

    <hr>

    <child ref="childComponent"></child>
</div>

<template id="child">
    <div>
        <input type="datetime" name="datetime" v-model="local">
        <button @click="getLocalData">获取当前时间</button>
    </div>
</template>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: 'Hello ref'
        },
        mounted() {
            console.log('mounted: ' + this.$refs.msgText.value)
        },
        methods: {
            getElement() {
                console.log('input 输入框的值为：' + this.$refs.msgText.value)
                this.$refs.childComponent.getLocalData()
                console.log('子组件 input 输入框的值为：' + this.$refs.childComponent.local)
            }
        },
        components: {
            'child': {
                template: '#child',
                data() {
                    return {
                        local: ''
                    }
                },
                methods: {
                    getLocalData() {
                        var date = new Date()
                        this.local = date.toLocaleString()
                    }
                },
            }
        }
    });
</script>

可以看到，当我们将 ref 添加到子组件上，我们就可以在 Vue 实例上获取到这个注册的组件引用，同注册的 DOM 元素一样，我们都可以使用添加的 ref 属性值作为 key 获取到注册的对象。此时，我们就可以获取到这个子组件上的 data 选项和 methods 选项。

总结

因为 Vue 采用 Virtual DOM 的做法渲染网页，如果我们直接操作 DOM，很容易产生实际网页跟 Vue 产生的 Virtual DOM 不同步的问题，而通过使用 ref 属性之后，在一些需要获取 DOM 元素的情况下，我们就可以很方便的获取 DOM 元素。当然，当我们决定在项目中使用 Vue，还是需要转变我们的思路，将操作 DOM 转变成操作数据。同样的，通过将 ref 属性添加到子组件上，我们就可以很轻松的获取到子组件的相关信息，这无疑给父组件获取子组件数据、调用子组件的方法提供了一种新的思路。

关于Vue中ref 如何使用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

Vue中ref 如何使用

总结

相关阅读