javascript - 如何在 Vue js 中使用其名称获取 View 或组件对象？

Question

Javascript 代码:

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

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

现在，当我访问 main.currentView 时，我得到“top”。但是对于这个字符串 'top'，我如何获取组件 topComponent？

Answer 1

来自VueJS guide

Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you have to assign a reference ID to the child component using ref. For example:

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>