`

ref引用

什么是ref引用

ref用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用

每个vue的组件实例上，都包含一个 $refs对象**，里面存储着对应的DOM元素或组件的引用。默认情况下，**组件的$refs指向一个空对象

showThis(){
//打印this  寻找$ref
console.log(this)
}

在这里可以看到$refs:{} 是一个空的对象

在标签中使用

第一步标签里面起一个ref名字

<template> 
<div>
    <button @click="showThis">
        改变h1标签字体的颜色
    </button>
       <h1 ref="myh1">  //在这里使用ref
           这是一个h1的标签
     </h1>
    </div>
</template>
<script>
    methods:{
        showThis(){
            console.log(this)
        }
    }
</script>

我们在h1标签里面加入了ref属性，也设置了一个点击事件，可以查看到this中的$refs中的内容如下图所示

此时可以看见不是一个空对象了，里面是有内容的

注意：如果ref的名字互相冲突了后面的会覆盖前面的DOM样式

接下来就可以操作DOM样式了 如代码所示

<template> 
<div>
    <button @click="changeColor">
        改变h1标签字体的颜色
    </button>
       <h1 ref="myh1">  //在这里使用ref
           这是一个h1的标签
     </h1>
    </div>
</template>
<script>
    methods:{
        changeColor(){
            this.$refs.myh1.style.color="red"   //让h1的内容变为红颜色
        }
    }
</script>

浏览器内容就变成了 如图所示

在组件中使用去获取其他组件的方法

在根组件中引入另外一个组件 在引入进来的一个组件中使用ref 起一个名字 这样就可以获取到组件里面得实例对象了

<template>
<div>
    <button  @click="showThis">
        打印this
    </button>
    <Text ref="text"></Text>  //这是引入的组件  加入ref属性
    </div>
</template>
<script>
    import Text from "./components/left.vue";
    components: {
   Text
  },
      methods:{
          showThis(){
              console.log(this)
          }
      }
</script>

打印出来的this 并不是一个空对象 是一个组件对象 如图所示

接下来我们在text组件里面写入一段代码 设置一个数字加1 和重置数字为0

<template>
  <div class="left">
      <h1>这是Left子组件数字为{{count}}</h1>
      <button @click="add">+1</button>
      <button @click="resCount">重置数字为0</button>
  </div>
</template>
<script>
export default {
data(){
    return{
        count:0
    }
},
methods:{
add(){
    this.count+=1
},
resCount(){
    this.count=0
}
}
}
</script>
<style>
.left{
    height: 300px;
    background-color: pink;
}
</style>

当我们在App根组件中写入一个点击事件 可以重置text的数字

<template>
  <div>
    <button @click="showThis">打印this</button>
    <button @click="onReset">重置子组件数字为0</button>
    <hr />
    <Text ref="text"></Text>
  </div>
</template>
<script>
import Text from "./components/left.vue";
export default {
  components: {
    Text,
  },
  methods: {
    showThis() {
      console.log(this);
    },
    onReset(){
      this.$refs.getLeft.resCount()    //增加了这段代码 可以拿到text组件resCount（）方法
    }
  },
};
</script>

总结

通过上面的代码 ref的可以操作DOM 也可以取到不同组件里面的方法