如何在 Vue js 中使用其名称获取视图或组件对象？

Question

Javascript代码：

     var main = new Vue({
        el: "#main",
        data: {
            currentView: "top",
        },
    });

   var topComponent = Vue.component('top', Vue.extend({
    template: "#top",
   }));

现在，当我访问 main.currentView 时，我得到“顶部”。但是有了这个字符串’top’，我如何获得组件 topComponent ？

原文由 Preethi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

来自 VueJS 指南

尽管存在 props 和 events，但有时您可能仍需要直接访问 JavaScript 中的子组件。为此，您必须使用 ref 为子组件分配参考 ID。例如：

 var parent = new Vue({ el: '#parent' })
// access child component instance
var child = parent.$refs.profile

 <div id="parent">
     <user-profile ref="profile"></user-profile>
</div>

原文由 Migwell 发布，翻译遵循 CC BY-SA 4.0 许可协议