如何使用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

你可能想看看这个例子：

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

它使用的HTML，它需要一个字符串来改变显示的视图模型的v-view指令。一些甜蜜的过渡也在进行。

从物品：https://github.com/yyx990803/vue/blob/master/test/functional/fixtures/routing.html

Answer 2

从VueJS guide

尽管道具和活动的存在，有时你可能仍然需要直接访问一个子组件在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 3

这很容易。您只需使用Vue.component即可访问topComponent。

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

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

cid 
options 
super 
extend 
directive 
filter 
partial 
transition 
component