Cách lấy đối tượng dạng xem hoặc thành phần bằng tên của nó trong Vue js?

Question

mã Javascript:

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

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

Bây giờ khi tôi truy cập main.currentView, tôi nhận được "top". Nhưng với chuỗi 'top' này, làm thế nào để tôi có được thành phần topComponent?

Answer 1

Bạn có thể muốn kiểm tra ví dụ này:

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

Nó sử dụng v-view chỉ thị trong html, trong đó có một chuỗi thay đổi viewmodel hiển thị. Một số quá trình chuyển đổi ngọt cũng diễn ra.

Comes từ: https://github.com/yyx990803/vue/blob/master/test/functional/fixtures/routing.html

Answer 2

Từ VueJS guide

Mặc dù sự tồn tại của đạo cụ và các sự kiện, đôi khi bạn vẫn có thể cần phải truy cập trực tiếp một thành phần con trong JavaScript. Để đạt được điều này, bạn phải gán một ID tham chiếu cho thành phần con bằng cách sử dụng ref. Ví dụ:

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

Thật dễ dàng. Bạn có thể truy cập vào topComponent chỉ bằng cách sử dụng Vue.component.

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

Bây giờ bạn có topComponent, bạn có thể làm nhiều việc với các phương pháp của nó.

cid 
options 
super 
extend 
directive 
filter 
partial 
transition 
component