vue中$refs的基本用法

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

<div id="app">
    <div ref="haha">这是div</div>
 
    <button @click="getref">获取H1元素</button>
</div>

methods: {
        getref() {
           console.log(this.$refs.haha.innerText);// 表示从 $refs对象 中, 获取 ref 属性值为haha的DOM元素
           this.$refs.haha.style.color = 'green';// 修改html样式
        }
      }

2、ref 加在子组件上，用this.refs.（ref的值）.方法（） 就可以使用了。

父组件

<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild"></child>
  </div>
</template>

<script>
  import Child from "./child";
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿哈嘿"); // 划重点！！！！
      }
    }
  };
</script>

子组件

<template>
  <div>
    child
  </div>
</template>

<script>
  export default {
    name: "child",
    props: "someprops",
    methods: {
      parentHandleclick(e) {
        console.log(e);
      }
    }
  };
</script>

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

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