Vue中$refs 使用详解

最新推荐文章于 2025-07-20 09:00:00 发布

原创最新推荐文章于 2025-07-20 09:00:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue+element 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Vue中$refs的基本用法及如何通过$refs获取DOM元素或子组件实例，包括直接修改DOM内容和调用子组件的方法。

js中想要获取dom节点一般用document.querySelecto('.input'),然后获取input的值。在vue中绑定ref就不需要在获取dom节点了，直接绑定在input上，然后 $refs 调用即可。$refs 的使用方法就是在元素或组件标签上添加ref属性指定一个引用信息，引用信息将会注册在父组件的$refs对象上，在js中使用$refs来指向DOM元素或组件实例；

1.基本用法

<template>
 
  <div class="hello">
 
    <p ref="testTxt">{{oldMsg}}</p>
 
    <button @click="changeMsg()">点击修改段落内容</button>
 
  </div>
 
</template>
 
<script>
 
export default {
 
    data(){
 
        return {
 
            oldMsg:'这是旧数据',
 
            newMsg:'hello,这是新数据！！！',
 
        }
 
    },
 
    methods:{
 
        changeMsg(){
 
            this.$refs.testTxt.innerHTML=this.newMsg;
 
        },
    
    }
 
}
 
</script>

2.获取子组件中的数据

父组件：

<template>
    <div class="parent">
    	<!-- 子组件标签上添加ref属性: ref="childItemId -->
        <Children ref="childItemId"></Children >
        <p style="color:blue;">{{msgFromChild}}</p>
        <button @click="getChildMsg()">使用$refs获取子组件的数据</button>
    </div>
</template>
 
<script>
import Children from './Children '
export default {
    components:{Children },
    data(){
        return {
            msgFromChild:'',
        }
    },
    methods:{
        getChildMsg(){
        	//父组件用$refs来获取子组件的数据
            this.msgFromChild=this.$refs.childItemId.childMsg;
            console.log(this.msgFromChild);//这是子组件的参数
            //父组件用$refs来调用子组件的方法
            this.$refs.childItemId.open();// 我是子组件
        },
    }
}
</script>

子组件：

<template>
    <div class="children"></div>
</template>
 
<script>
export default {
    data(){
        return {
            childMsg:'这是子组件的参数'
        }
    },
    methods:{
        open(){
      		console.log('我是子组件');
    	}
    }
}
</script>