我正在嘗試在 Vue.js 中實作一個名為 CamViewMatrix 的組件。我的要求是在內部獲取 CamViewMatrix 父級的寬度（比如在created()CamViewMatrix 的方法中），以便我可以用它進行一些計算（有一些基于時間的圖表需要做出回應，除非初始值是不可能的因為寬度在手）。
<div>
<div class='controller-wrapper'>
...
</div>
<CamViewMatrix v-bind:cameras='cams' />
</div>
我嘗試將 an 分配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
...
}
}
使用上面的代碼，我無法獲取父元素（它是 logging null）。
也嘗試過使用refand $parent，但無法使用。請幫我解決這個問題。
提前致謝。
uj5u.com熱心網友回復：
created() 這樣做是錯誤的生命周期鉤子。
如果您從檔案中查看生命周期圖：https ://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
元素的東西還沒有完成（渲染），只創建了實體。
你最有可能在做什么mounted。
接下來，您可以通過 訪問組件的父級this.$parent和通過this.$parent.$el.
查看：https ://vuejs.org/v2/api/#Instance-Properties
如果您想要來自父級的特定元素，請創建一個 ref 并像這樣訪問它：
this.$parent.$refs.refNameYouAdded
如果它是一個 Vue 組件，那么它就是一個 Vue 實體，所以你需要$el再次訪問：
this.$parent.$refs.refNameYouAdded.$el
否則，如果它是 HTML 元素，則無需這樣做。
大多數情況下，上述答案有效，但有時如果您的父組件執行諸如將元素移動到其他地方的操作，那么它可能不準確。
如評論中所述，您仍然可以通過以下方式訪問正確的父元素：
this.$el.parentElement
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414936.html
標籤：
下一篇：如何獲得VUEX的價值