博客

错误场景：根据ref找到元素并设置其style

this.$refs.xxx.style.opacity = '1'

会报错，这里需要使用

this.$refs.xxx.$el.style.opacity = '1'

vm.$el 用于获取vue（子）组件所挂载的实例的dom对象，在mounted生命周期中才有效

<template>
<div>
    <div>hello world</div>
</div>
</template>
<script>
export default {
  name: "Home",
  data () {
    return {
    };
  },
  mounted(){
    // this.$el只在mounted中才有效
    console.log(this.$el);	//vue组件的dom对象
    this.$el.style.color = "red"
  }
}
</script>

而 $refs 拿到的分两种情况：

1. ref 加在普通的元素上，用this.$refs.
   
   xxx
   
   获取到的是dom元素
2. ref 加在子组件上，用this.$refs.
   
   xxx
   
   获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接.方法()调用