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>

TA貢獻1155條經驗 獲得超0個贊
這可能不是您特定問題的答案,但我發現另一個$refs
空的原因是定義它的組件尚未創建/安裝。可能是由于 Vue 使用的延遲渲染。
我有一組選項卡,其中一個是我有一個“ref=”的選項卡,如果我沒有訪問該選項卡,那么它$refs
是空的。但是如果我第一次訪問該選項卡,那么 ref 設置正確。

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>
添加回答
舉報