在Vue js中獲取父元素的寬度

Question

我正在嘗試在 Vue.js 中實現一個名為 CamViewMatrix 的組件。 我的要求是獲取 CamViewMatrix 父級的寬度（例如在 CamViewMatrix 的created()方法中），以便我可以用它進行一些計算（有一些基於時間的圖表需要做出響應，除非寬度的初始值在手）。

<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()是錯誤的生命周期鈎子。

如果您從文檔中查看生命周期圖： https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

元素的東西還沒有完成（渲染），只創建了實例。

你最有可能在mounted中做什么。

接下來，您可以通過this.$parent訪問組件的父級，並通過this.$parent.$el訪問元素。

簽出： https://v2.vuejs.org/v2/api/#Instance-Properties

---

如果您想要來自父級的特定元素，請創建一個 ref 並像這樣訪問它：

this.$parent.$refs.refNameYouAdded

如果它是一個 Vue 組件，那么它就是一個 Vue 實例，所以你需要再次訪問$el ：

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

否則，如果它是 HTML 元素，則無需這樣做。

---

大多數情況下，上述答案有效，但有時如果您的父組件執行諸如將元素移動到其他地方的操作，那么它可能不准確。

如評論中所述，您仍然可以通過以下方式訪問正確的父元素：

this.$el.parentElement