Vue 获取子组件高度

CSS 选择器

一般 DOM 元素应用此方法没有问题，但是有父子组件关系时，因为组件加载顺序的问题，可能会导致获取元素为 null

export default {
  mounted() {
    console.log(document.querySelector("id").clientHeight)
  }
}

ref 节点获取

给子元素的根节点添加 ref ，在父组件中 this.$refs['child'].$refs['child-dom'] 来获取子组件 DOM。

每个组件都有一个 $el 属性，表示其对应的 DOM，可以通过该属性获取元素各种参数。但这个属性其实是私有属性，理论上对开发者并不透明，但因为 JS 语法的缘故并没有真正的私有属性所以也可以直接用。

这样做破坏了封装性，相当于父组件提前知道子组件的结构了，依赖关系有点问题。

<template>
  <son-component ref="ref"></son-component>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.ref.$el.offsetHeight)
    }
  }
</script>