为什么出现ref

在没有学习Vue之前,我们实现直接操作页面上的DOM元素都是通过JS/jQuery,因为jQuery对DOM元素的操作非常的方便 但是学习了vue之后 就比jquery更方便
所以它的作用是什么呢?

  • 使用ref获取页面DOM元素
  • ’使用 ref获取子组件对象

ref使用原理

ref在Vue中是用来给元素或是子组件注册引用信息到父组件或是 Vue实例上,注册后的引用信息都会呈现在父组件/Vue实例的 ( . r e f s ) 上 , 这 时 , 我 们 就 可 以 通 过 ( .refs) 上,这时,我们就可以通过( .refs)(.refs) 获取到引用的 DOM 对象或是子组件信息。

那我们应该怎么使用呢?(获取dom元素)

例如,我们可以获取到页面上添加了 ref 的input输入框的值,对于子组件来说,我们可以直接获取到子组件data 选项中的数据,或是直接调用子组件的方法。

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

js代码

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

运行代码,从结果中可以看到,在beforeMount 这个钩子函数中,我们是无法获取到这个DOM 元素的值,结合之前学习的 Vue 生命周期的相关知识,当执行到beforeMount 钩子函数时,Vue虽然已经将模板编译完成,但是尚未挂载到页面 DOM 元素上,还只是挂载在虚拟DOM上,因此我们可以得出 ref是在页面渲染完成后才被创建的。

Logo

前往低代码交流专区

更多推荐