博客

1、首先认识一下ref

ref说白了就是标识，获取某一个标签的标志。

为什么这么说呢？

<button ref="age" @click="getRefAge">ref的age形式</button>

getRefAge(e){
		// 获取的是button标签, ref是用来获取标签的
        console.log(this.$refs.age)       
        console.log(this.$refs.age === e.target)  // true
        console.log(this.$refs)     // {age: button对象}   
      }

这个时候，可以看到给age是成为了这个button标签的标识，用于寻找，获取这个标签的标识。

2、ref的有趣玩法，深入一下，防止迷糊

// 注意: 给ref是给其绑定了v-bind事件
<button :ref="age" @click="refDongTai">ref成了动态的情况</button>

refDongTai(e){
        console.log(e.target)
        console.log(this.$refs[this.age])   // 可以访问，但没什么实质性的用处
      }

这个时候， age是一个变量，假设age的值是18，那么这个ref使用的是标识是18这个数值

3、ref和e.target的区别

<button ref="age" @click="getRefAge">ref的age形式</button>

getRefAge(e){
        console.log(this.$refs.age)     
        console.log(this.$refs.age === e.target)  // true 
      }

可以看到都同样可以获取到标签，并且 e.target的用法还单词比较少。

要想知道其区别，还需要打印一下，refs

getRefAge(e){
        console.log(this.$refs)     // {age: button标签}   
      }

现在就可以知道了，因为ref是保存在了this身上的，即vue的实例身上的，那么标识了ref的，
可以在任意位置将标签取出来使用，而e.target,则仅限于触发了这个标签事件的时候可以使用

说白了，就是this.$refs的作用范围 > e.target。 

【备注】：新手写文，如有不足之处，还请指出，提前感谢！