Vue里ref($refs)的基本用法

ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。

$refs是一个对象，持有已注册过 ref的所有的子组件。

案例

<template>
    <div class="box">
      <h1 ref="my">我是组件,数值1为{{num1}}---数值2为{{num2}}</h1>
      <button @click="showThis">打印</button>
      <button @click="addNum1">增加数值1</button>
      <button @click="addNum2">增加数值2</button>
    </div>
</template>

<script>
export default {
  name: "ref",
  data(){
    return{
      num1:0,
      num2:0,
    }
  },
  methods:{
    showThis(){
      console.log(this)
      this.$refs.my.style.color='red'
    },
    addNum1(){
      this.num1+=1
    },
    addNum2(){
      this.num2+=1
    }
  }
}
</script>

<style scoped>
.box{
  width: 100%;
  height: 100px;
  background-color: cadetblue;
}
</style>

<template>
  <div>
    <h1>demoTwo页面</h1>
    <div>子组件的数值1值归0<button @click="resetNum1">点击</button></div>
    <div>子组件的数值2值归0<button @click="resetNum2">点击</button></div>
    <div>子组件的数值1+数值2<button @click="add">等于</button>{{sum}}</div>
    <REF ref="comInfo"></REF>
  </div>
</template>

<script>
import REF from "../components/ref";

export default {
  name: "demoTwo",
  components:{
    REF
  },
  data(){
    return{
      sum:""
    }
  },
  methods:{
    resetNum1(){
      this.$refs.comInfo.num1=0
      console.log(this)
    },
    resetNum2(){
      this.$refs.comInfo.num2=0
      console.log(this)
    },
    add(){
     this.sum=this.$refs.comInfo.num1+ this.$refs.comInfo.num2
    }
  }
}
</script>

<style scoped>

</style>

页面效果图

使用ref之后父组件控制台打印this可以看到组件的基本信息