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