获取Vue js中父元素的宽度

Question

我正在尝试在Vue.js中实现一个名为Vue.js的组件。我的要求是获取CamViewMatrix的父级的宽度(比如在created()的CamViewMatrix方法中)，这样我就可以用它进行一些计算(有一些基于时间的图表需要响应，这是不可能的，除非宽度的初始值在手上)。

<div>
  <div class='controller-wrapper'>
    ...
  </div>
  <CamViewMatrix v-bind:cameras='cams' />
</div>

我尝试将一个id分配给它的父级，并将其传递给CamViewMatrix，并尝试将其传递给getElementById，但它无法做到。代码如下：

<div id='parentid'>
  <div class='controller-wrapper'>
    ...
  </div>
  <CamViewMatrix v-bind:cameras='cams' parentId='parentid' />
</div>

在CamViewMatrix组件中：

<script>
export default {
  name: 'CamViewMatrix',
  props: {
    parentId: {
      type: String,
      required: true,
    },
    ...
  },
  created() {
    console.log(document.getElementById(this.parentId)); // ️ logs null
    ...
  }
}

使用上面的代码，我无法获得父元素(它是日志null)。

也曾尝试使用ref和$parent，但未能成功。请帮我这个忙。

提前谢谢。

Answer 1

created()是一个错误的生命周期挂钩。

如果您检查docs：https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram中的生命周期图

元素填充尚未完成(呈现)，只创建实例。

您很可能在mounted中做了什么。

接下来，您可以通过this.$parent访问组件的父级，通过this.$parent.$el访问元素。

退房：https://v2.vuejs.org/v2/api/#Instance-Properties

如果您希望从父元素中获得特定元素，请创建一个引用并访问它，如下所示：

this.$parent.$refs.refNameYouAdded

如果它是一个Vue组件，那么它将是一个Vue实例，因此您需要再次访问$el：

this.$parent.$refs.refNameYouAdded.$el

否则，如果它是一个HTML元素，那么就不需要这样做了。

大多数情况下，上面的答案是有效的，但有时如果父组件做了一些事情，比如将元素移到其他地方，那么它可能不准确。

正如注释中提到的，您仍然可以通过执行以下操作来访问正确的父元素：

this.$el.parentElement