Javascript 从Vue.js中的父对象访问组件数据结构

我有一个带有Dynamicly创建的组件的主组件，如下所示：

<template>
  <div class="box">
<component v-for="node in nodes" v-bind:is="node.type" :id="node.id" :nodes="node.nodes" :key="node.id">
</component>

<button type="button" v-on:click="addFormElement('Block', id, metaData)">Add Layout</button>
<button type="button" v-on:click="addFormElement('ModelAuto', id, ModelAuto.metaData)">Add ModelAuto</button>

</div>
</template>
<script>
import Block from "@/components/elems/Block.vue";
import ModelAuto from "@/components/elems/ModelAuto.vue";

export default {
  name: "Block",
  props: [ 'id', 'nodes', 'type' ],

---

正确的方法是什么？

您试图通过组件“类”获取属于组件实例的一些数据。这与在PHP中静态访问实例属性的问题相同

要使其正常工作，可以将命名导出添加到组件文件中

导出常量元数据={
modelNum:8
}
导出默认值{
名称：“ModelAuto”，
道具：['id'，'nodes'，'type']，
数据：函数（）{
返回{}
}
}

它允许您按照通常的方式导入组件

从“@/components/elems/ModelAuto.vue”导入ModelAuto；

但你也可以这样做

导入ModelAuto，{元数据作为modelAutoMetaData}来自“@/components/elems/ModelAuto.vue”；
导出默认值{
名称：“块”，
道具：['id'，'nodes'，'type']，
数据（）{
返回{
modelAutoMetaData
}
}
}

你终于可以做到了

添加模型自动

<button type="button" v-on:click="addFormElement('ModelAuto', id, ModelAuto.metaData)">Add ModelAuto</button>

export default {
  name: "ModelAuto",
  props: [ 'id', 'nodes', 'type' ],
  data: function() {
      return {
          metaData: {
              modelNum: 8
          }
      }
  }
}