How to access one component within another?

Question

How to access one component within another?

Navigation

#1 by (0 votes)

0

I'm using single file components , but I can not access a component via another component, here's what I've tried ...

<template>
  <div id="containerPrincipal" @click.stop="teste">
 ...
<template>

<script>
 /*Outro componente*/
 import flex_div from './elementos/Div.vue'

 export default {
  name: 'containerPrincipal',
  methods : {
   teste () {
      componente = new flex_div().$mount();
      console.log(componente);
   }
  },
  components: {
   flex_div
  }
 }
</script>

Error

_Div2.default is not a constructor

How can I resolve this?

Edit

Div.vue

<template>
  <div id="flexdiv" @click.stop="opcoes">

    ...
</template>

<script>
export default {
name: 'flexdiv',
data () {

    return {
      modal : false,
      eventMod : false,
      elMod : false,
    }

},
methods : {

opcoes (event) {

  if(this.modal === true) {this.modal = false;}
  else {this.elMod = event.target; this.eventMod = event; this.modal = true;}

}

<style scoped>

#flexdiv {
  background: #424242;
  height: 200px;
  width: 400px;
}

</style>

vue.js vue.js-2

asked by anonymous 22.11.2017 / 17:43

1 answer

I want to get the same ID render button according to status

score 0 · Accepted Answer

To resolve, I had to instantiate Vue again and reference the component ...

<template>
  <div id="containerPrincipal" @click.stop="teste">
 ...
<template>

<script>
 /*Other component*/
 import Vue from 'vue'
 import flex_div from './elementos/Div.vue'

 let flexdiv = Vue.component('divFlex', flex_div);

 export default {
  name: 'containerPrincipal',
  methods : {
   teste () {
      let componente = new flexdiv().$mount();
      console.log(componente);
   }
  },
  components: {
   flexdiv 
  }
 }
</script>