第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

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

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

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

3 回答

?
元芳怎么了

TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超7個(gè)贊

您可能已經(jīng)解決了這個(gè)問(wèn)題,但只是為了回答這個(gè)問(wèn)題:


我遇到了類似的問(wèn)題,這似乎是因?yàn)樵?Vue 有時(shí)間用自己的版本替換根 DOM 之前調(diào)用了該函數(shù)。你可以做些什么來(lái)解決這個(gè)問(wèn)題是創(chuàng)建一個(gè)mounted生命周期鉤子并在那里調(diào)用函數(shù)。


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>


查看完整回答
反對(duì) 回復(fù) 2022-01-07
?
白衣非少年

TA貢獻(xiàn)1155條經(jīng)驗(yàn) 獲得超0個(gè)贊

這可能不是您特定問(wèn)題的答案,但我發(fā)現(xiàn)另一個(gè)$refs空的原因是定義它的組件尚未創(chuàng)建/安裝??赡苁怯捎?Vue 使用的延遲渲染。

我有一組選項(xiàng)卡,其中一個(gè)是我有一個(gè)“ref=”的選項(xiàng)卡,如果我沒(méi)有訪問(wèn)該選項(xiàng)卡,那么它$refs是空的。但是如果我第一次訪問(wèn)該選項(xiàng)卡,那么 ref 設(shè)置正確。


查看完整回答
反對(duì) 回復(fù) 2022-01-07
?
小唯快跑啊

TA貢獻(xiàn)1863條經(jīng)驗(yàn) 獲得超2個(gè)贊

你可以做到,你遇到的問(wèn)題是你的父組件實(shí)際上沒(méi)有任何參考。


我不建議這樣做,無(wú)論是使用 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>


查看完整回答
反對(duì) 回復(fù) 2022-01-07
  • 3 回答
  • 0 關(guān)注
  • 700 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)