在Vue中使用ref获取dom元素节点及组件内的数据和方法

本文详细介绍了在Vue应用中如何利用ref属性来获取DOM元素节点以及组件内部的数据和方法。通过在元素或组件上设置ref属性，然后在Vue实例中通过this.$refs来访问，实现对元素和组件的引用，无论是获取DOM节点还是组件的属性和方法，流程都是相似的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、获取dom元素节点

为元素添加一个ref属性该属性的值可任取以作为该节点的引用名
ref即为reference(引用)的前三个字母

<div id="app">
	<input type="button" value="获取元素" @click="getElement">
	<h3 ref="mytitle">This is title</h3>
	<p ref="mycontent">This is content</p>
</div>

用Vue实例中的自带的$refs属性获取元素用预先定义好的引用名来获取即在页面中的ref属性定义的值

<script>
    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{
        getElement()
        {
            console.log(this.$refs.mytitle.innerText);
            console.log(this.$refs.mycontent.innerText);
        }
       }
    });
</script>

二、获取组件内的数据和方法

<script>
    var login={
        template:"<h1>Login</h1>",
        data()
        {
            return {
                msg:"this is msg!"
            }
        },
        methods:{
            sayHello()
            {
                console.log("Hello")
            }
        }
    }
</script>

同样为组件添加一个ref属性

<div id="app">
	<login ref="mylogin"></login>
</div>

还是用$refs属性进行获取：

<script>
    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{
        getElement()
        {
            // 获取组件中的数据
            console.log(this.$refs.mylogin.msg);
            // 调用组件中的方法
            this.$refs.mylogin.sayHello();
        }
       },
       components:{
           login
       }
    });
</script>