[JavaScript知识库]vue中$ref和$el的区别？

下面先详细了解$ref：
定义一个父组件：

<template>
  <div class="container" ref="box">
    <Child ref="child"></Child>
  </div>
</template>
<script>
import Child from '@/components/child.vue'
export default {
  components: {
    Child
  },
  mounted() {
    console.log("dom元素", this.$refs.box);	// 拿到的是dom元素
    console.log("组件实例", this.$refs.child);	// 拿到的是child这个组件的实例
  }
}
</script>

1. 如果ref使用在元素上的，则拿到的是该元素对象
2. 如果ref使用在组件上的，则拿到的是该组件的vue实例对象，那就可以直接使用child组件中定义的所有属性和方法

下面通过ref获取组件的实例，然后调用子组件中定义的方法：
父组件

<div class="container" ref="box">
    <el-button size="small" type="primary" @click="handleClick"
      >点击触发子组件</el-button
    >
    <Child ref="child"></Child>  <!--子组件-->
</div>

handleClick() {
	this.$refs.child.init() // init是子组件中定义的方法
}

子组件

<template>
  <div class="box">
  	<div ref="sun">我是子组件</div>
  </div>
</template>

<script>
export default {
  methods: {
    init() {
      alert('我是子组件')
    }
  }
}
</script>

$ref和$el的区别在于，$ref拿到的是dom元素，而$el拿到的组件中的根元素
如果我想在父组件中获取子组件距离浏览器顶部的距离：

console.log(this.$refs.child.$el.offsetTop);

因为this.$refs.child.$el拿到的就是子组件的根元素；
如果想要在父组件中继续获取子组件中的其他dom元素：

console.log(this.$refs.child.$refs.sun);

注：父组件中使用this.$refs.child，就相当于子组件中的this，可以当成this使用该组件中的所有属性和方法