如何在 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 ？

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>

Answer 2

这很简单。 您可以使用Vue.component topComponent

var topComponent = Vue.component('top');

现在你有了topComponent ，你可以用它的方法做很多事情。

cid
options
super
extend
directive
filter
partial
transition
component

Answer 3

你可能想看看这个例子：

http://jsbin.com/wikeb/1/edit

它使用 html 中的v-view指令，该指令接受一个字符串来更改显示的视图模型。 一些甜蜜的转变也在发生。

来自： https ://github.com/yyx990803/vue/blob/master/test/functional/fixtures/routing.html