亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

this.$refs 在 Vue 組件中始終為空或未定義

this.$refs 在 Vue 組件中始終為空或未定義

慕妹3146593 2022-01-07 14:06:20
我是 Vue 的新手,我正在嘗試使用 $refs 從兄弟組件中獲取 DOM 中的一些元素(出于非?;镜哪康模皇菫榱双@取它們的高度等),我正在計算中這樣做。無論我嘗試什么,this.$root.$refs要么總是返回未定義或作為空對象,我不知道我做錯了什么。在父組件中,我有:<template><ComponentA /><ComponentB /></template>在組件 AI 中有:<template>  <div id="user-nav">   <div ref="nav-container">    <slot />   </div>  </div></template>我只是嘗試查看是否可以通過控制臺日志記錄在 ComponentB 中訪問它 console.log(this.$root.$refs);在該組件的已安裝功能中。但我不斷得到一個空對象。你能不能像這樣跨兄弟組件訪問東西???
查看完整描述

3 回答

?
元芳怎么了

TA貢獻1798條經驗 獲得超7個贊

您可能已經解決了這個問題,但只是為了回答這個問題:


我遇到了類似的問題,這似乎是因為在 Vue 有時間用自己的版本替換根 DOM 之前調用了該函數。你可以做些什么來解決這個問題是創建一個mounted生命周期鉤子并在那里調用函數。


const vm = new Vue({

  el: '#app',

  data: {

    sayHi: 'Ello World',

  },

  mounted: function() { // The hook. Here, Vue has already worked its magic.

    console.log('YOUR ELEMENT ----> ', this.doSomething())

  },

  methods: {

    doSomething: function() {

      return this.$refs['nav-container']

    }

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <span ref="nav-container">{{ sayHi }}</span>

</div>


查看完整回答
反對 回復 2022-01-07
?
白衣非少年

TA貢獻1155條經驗 獲得超0個贊

這可能不是您特定問題的答案,但我發現另一個$refs空的原因是定義它的組件尚未創建/安裝。可能是由于 Vue 使用的延遲渲染。

我有一組選項卡,其中一個是我有一個“ref=”的選項卡,如果我沒有訪問該選項卡,那么它$refs是空的。但是如果我第一次訪問該選項卡,那么 ref 設置正確。


查看完整回答
反對 回復 2022-01-07
?
小唯快跑啊

TA貢獻1863條經驗 獲得超2個贊

你可以做到,你遇到的問題是你的父組件實際上沒有任何參考。


我不建議這樣做,無論是使用 vuex、eventbus 還是 $emit


Vue.component('componentA', {

  template: '<div><span ref="ref-inside-a">You\'re in A!</span></div>',

  methods:{

  log(){

  console.log('Hello from a')

  }

  }

})


Vue.component('componentB', {

  props: ['ball'],

  template: '<div><span>This is B!</span></div>',

  mounted() {

    this.$root.$refs['a'].log()    

    console.log(this.$root.$refs['a'].$refs['ref-inside-a'])

  }

})


new Vue({

  el: "#app",

  mounted() {

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <component-a ref="a"></component-a>

  <component-b ref="b"></component-b>


</div>


查看完整回答
反對 回復 2022-01-07
  • 3 回答
  • 0 關注
  • 691 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號