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>

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è)置正確。

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>
添加回答
舉報(bào)