如何在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指南

尽管存在道具和事件,但有时您可能仍需要直接访问JavaScript中的子组件.要实现此目的,您必须使用参考ID为子组件分配ref.例如:

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

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

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/function/fixtures/routing.html