How to access one component within another?

Asked

Viewed 1,010 times

0

I’m using the single file components, but I can’t access a component via another component, follow what I 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 fix this?

Edit

Div.Ve.

<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

  • Want to add that component multiple times or just once? Can you explain what you’re doing in the application that needs that component?

  • @Sergio, everything in my application is generated dynamically, this component, will be added several times and each time it is added will have to be treated individually, so I did it this way. there will be nothing predefined.

  • And it should be added to the right DOM? You want to insert several in the same place (together with others) or in different places in the DOM?

  • @Sergio I’ll try to explain, I have an initial component, when I click on this component, will open a menu with several options among them stylize the component, add elements etc... if I add an element in the component, example a div, this div will have the same options as the initial component or when I click this div, it can be stylized and can receive other elements and so on, follow an example of this I said https://jsfiddle.net/044euft5/2/

2 answers

0


To solve 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>

-1

my solution was this

<script>
import TableUsers from './views/TableUsers'
import Vue from 'vue'

Vue.component('TableUsers', TableUsers)

export default {
  name: 'Dashboard',
  data () {
    return {
      components: {
        'TableUsers': TableUsers
      }
    }
  }
}
</script>

Browser other questions tagged vue.js vue.js-2

You are not signed in. Login or sign up in order to post.