找不到 VueJS 元素参考

Question

在 VueJS 中我想通过 VueJS 中的 ref 属性引用模态元素。我以前用过它们，但是在这个设置中有些不对劲导致它不起作用并给出错误：

TypeError: this.$refs.modal is undefined

我正在通过 app.js 文件访问参考。

这是我的主要 app.vue 模板代码：

    <template>
    <main class="main" id='app'>
        <div v-if="$root.bLoading" class="page-loader">
            <div class="page-loader__spinner">
                <svg viewBox="25 25 50 50">
                    <circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
                </svg>
            </div>
        </div>
        <span v-else v-cloak>
            <header-nav></header-nav>
            <router-view></router-view>
            <footer></footer>
        </span>
        <main-modal ref="modal"></main-modal>
    </main>
</template>

这是我的 app.js 尝试访问引用的代码：

 let app = new Vue({
        el: '#app',
        render:h=>h(App),
        data : function(){
            return {

            }
        },
        router,
        methods : {
            showModal : function(modal_name="",modal_data={}){
                this.$refs.modal.showModal(modal_name,modal_data);
            },
        }
    });

为什么找不到这个参考元素？

Answer 1

发生这种情况是因为 ref="modal" 是 App 组件的一部分，并且您正在尝试从根实例访问该引用组件。实例 ref 在组件 App 之外不可用。尝试将 showModal 方法移动到 App 组件中。

注意：与您的代码有些出入。您的 #app 元素有一个模板，同时您正在使用 render 函数，该函数应该呈现 App 组件。这是矛盾的。示例中的模板真的是 Root Instance 或 App 组件的一部分吗？

找不到 VueJS 元素参考

VueJS Element Reference Not Found

javascript

ref

vue.js