vue中ref（$refs）用法

最新推荐文章于 2024-09-17 11:32:38 发布

hamimelon2020

最新推荐文章于 2024-09-17 11:32:38 发布

阅读量1.8k

点赞数

分类专栏： JavaScript vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_40945354/article/details/119905693

版权

本文详细介绍了 Vue.js 中 `ref` 的三种用法：1) 在普通元素上使用，通过 `this.$refs.name` 获取 DOM 元素；2) 在子组件上使用，获取组件实例以调用其方法；3) 结合 `v-for` 获取一组元素或组件。重点强调了 `ref` 应在 DOM 渲染完成后使用，如在 `mounted()` 生命周期钩子内，或使用 `this.$nextTick(() => {})`。并提供了不同场景下的 ref 使用示例。

摘要由CSDN通过智能技术生成

ref有三种用法：
1、ref 加在普通元素上，用this.$refs.name 获取到的是dom元素

2、ref 加在子组件上，用this.$refs.name 获取到的是组件实例，可以使用组件的所有方法。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

注意：

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref 是通过v-for 循环出来的，有多个重名，那么ref的值会是一个数组，此时要拿到单个的ref 只需要循环就可以了。

如下例子：
1、ref使用在外面的组件上

<div id="ref-outside-component" v-on:click="consoleRef">
    <component-father ref="outsideComponentRef"></component-father>
    <p>ref在外面的组件上</p>
</div>
    var refoutsidecomponentTem={
   
        template:"<div class='childComp'><h5>我是子组件</h5></div>"
    };
    var refoutsidecomponent=new Vue({
   
        el:"#ref-outside-component",
        components:{
   
            "component-father":refoutsidecomponentTem
        },
        methods:{
   
            consoleRef:function () {
   
                console.log(this); // #ref-outside-component    vue实例
                console.log(this.$refs.outsideComponentRef);  // div.childComp vue实例，组件实例
            }
        }
    });