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 之外不可用。尝试在{strong> App 组件内移动showModal方法。

注意：您的代码有些差异。您的#app元素有一个模板，同时，您正在使用render函数，该函数应该呈现App组件。那是矛盾的。示例中的模板是否确实是 Root Instance （根实例）或 App 组件的一部分？

找不到VueJS元素参考

1 个答案: