How get one single component (carousel) from element-ui if is imported as global config object?

Question

Hi in project i have included element-ui.

In app.js:

import Element from 'element-ui'

and after:

Vue.use(Element, {locale})

So in my single file components template i can use carousel like this: (In this component is not any initialization carousel via vue like import, parent whatever...)

<el-carousel>
  <el-carousel-item>
    <p>hello!</p>
  </el-carousel-item>
</el-carousel>

And it works... BUT. How i can access to this element? Look to actual slide, use events and so on....?

I was tried in component something like:

import { Carousel } from 'element-ui';

and add to components list... It works, but it is another instance of this class...

So how i can GET real instance of carousel from DOM?

Answer 1

Easy. Make reference on element via ref attribute like this:

<el-carousel ref="myreference"></el-carousel>

and after this access:

console.log(this.$refs.myreference);