Question

我使用的是单个文件组件，但我无法通过其他组件访问组件，请按照我的尝试进行操作...

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

<script>
 /*Other component*/
 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>

错误

_Div2.default不是构造函数

我该如何解决这个问题？

Answer 1

要解决我必须再次实例化Vue并引用组件......

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

Answer 2

我可能错了，但这不是你想要做的吗？

<template><
  <div id="containerPrincipal" @click.stop="teste">
    <flex-div ref="flex_div"></flex-div>
  </div>
<template>

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

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

如何访问另一个组件中的Vue组件？

2 个答案: