javascript - tutorial - ¿Cómo obtener la vista o el objeto componente usando su nombre en Vue js?

vue js componente

Question

Código Javascript:

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

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

Ahora cuando accedo a main.currentView, obtengo "top". Pero con este string ''top'', ¿cómo obtengo el componente topComponent ?

Answer 1

Es posible que desee verificar este ejemplo:

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

Utiliza la directiva v-view en html, que toma una cadena para cambiar el modelo de vista que se muestra. Algunas dulces transiciones también.

Viene de: https://github.com/yyx990803/vue/blob/master/test/functional/fixtures/routing.html

Answer 2

Es fácil. Puedes acceder al topComponent simplemente usando Vue.component .

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

Ahora que tiene topComponent , puede hacer muchas cosas con sus métodos.

cid
options
super
extend
directive
filter
partial
transition
component

Answer 3

De la guía VueJS

A pesar de la existencia de accesorios y eventos, a veces es posible que aún necesite acceder directamente a un componente secundario en JavaScript. Para lograr esto, debe asignar una ID de referencia al componente secundario usando ref . Por ejemplo:

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>