vue获取子节点的宽高

你可以使用 `$refs` 来获取子节点的宽高。首先，在子组件中，给子节点设置一个 `ref` 属性，如下所示：

<template>
  <div ref="childNode">子节点</div>
</template>

然后，在父组件中，通过 `$refs` 来获取子节点的宽高，如下所示：

mounted() {
  const childNode = this.$refs.childNode
  const width = childNode.offsetWidth
  const height = childNode.offsetHeight
  console.log('子节点的宽度：', width)
  console.log('子节点的高度：', height)
}

这样就可以获取到子节点的宽高了。当然，如果在组件渲染完成后获取子节点的宽高，需要在 `mounted()` 生命周期中进行。

相关问题

vue获取子节点自定义属性

你可以通过 `$refs` 属性获取子组件的 DOM 节点，并使用 `getAttribute()` 方法获取自定义属性。例如：

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
    const childNode = this.$refs.child.$el;
    const customAttr = childNode.getAttribute('custom-attr');
    console.log(customAttr);
  }
}
</script>

在上面的例子中，`ChildComponent` 组件的 DOM 节点可以通过 `this.$refs.child.$el` 获取，然后使用 `getAttribute()` 方法获取自定义属性 `custom-attr` 的值。

vue获取元素节点class

在Vue中获取元素节点的class有多种方式。

1. 使用ref属性：在Vue组件中，可以通过给元素节点添加ref属性来获取其class。首先，在模板中给元素节点添加ref属性，例如`<div ref="myElement" class="my-class"></div>`。然后，在组件的方法中使用`this.$refs.myElement`即可获取该元素节点的class。

2. 使用$refs属性：在Vue的根实例中，可以使用$refs属性来获取元素节点的class。首先，在模板中给元素节点添加ref属性，例如`<div ref="myElement" class="my-class"></div>`。然后，在Vue实例中使用`this.$refs.myElement`即可获取该元素节点的class。

3. 使用querySelector方法：Vue实例内部可以使用querySelector方法来获取元素节点的class。例如，可以使用`document.querySelector('.my-class')`来获取class名为"my-class"的元素节点。

4. 使用getElementsByClassName方法：可以使用`document.getElementsByClassName('my-class')`来获取class名为"my-class"的所有元素节点。这个方法返回一个类数组对象，可以通过索引来获取具体的元素节点的class。

以上是几种常见的方式来在Vue中获取元素节点的class。具体选择哪种方式取决于具体的使用场景和需求。