Vue模板引用ref

模板引用ref

虽然Vue的声明性渲染模板为我们抽象了大部分对DOM的直接操作，但在某些情况下，我们任然需要直接访问底层DOM元素。要实现这一点，我们可以使用特殊的ref属性。
挂载结束后引用都会暴露在this.$refs之上。

<template>
<div ref="myRef" >内容</div>
<input type="text" ref="myInput">
<button @click="getElementHandle">点击修改内容</button>
</template>
 <script>
 //内容改变:{{模板语法}}
 //属性改变：v-bind
 //事件绑定：v-on
 //双向绑定：v-model
 //ref:获取元素
     export default {
        data(){
            return{
           content:"内容",
            }
        },
        methods:{
            getElementHandle(){
                console.log(this.$refs.myRef);
                this.$refs.myRef.innerHTML="内容被修改了";
            }
        }
    }
    </script>

运行结果：
未点击前：

点击后：

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

2、ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

应注意的坑：
1、如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量 ;
这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String））

2、通过 :ref =某变量 添加ref（即加了:号） ,如果想获取该ref时需要加 [0]，如this.$refs[refsArrayItem] [0]；如果不是:ref =某变量的方式而是 ref =某字符串时则不需要加，如this.$refs[refsArrayItem]。

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

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