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

我的主要组件具有动态创建的组件,如下所示:

<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' ],

我需要在v-on:click方法中传递导入组件的数据结构。例如在线

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

我想从ModelAuto组件的数据部分传递名称为metaData的对象。

在ModelAuto组件数据部分中,如下所示:

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

什么是正确的方法?

评论
  • 32场
    32场 回复

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

    要使其工作,您可以将命名导出添加到您的组件文件中

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

    它允许您像通常那样导入组件

    import ModelAuto from "@/components/elems/ModelAuto.vue";
    

    但是你也可以

    import ModelAuto, { metaData as modelAutoMetaData } from "@/components/elems/ModelAuto.vue";
    
    export default {
      name: "Block",
      props: [ 'id', 'nodes', 'type' ],
      data () {
        return {
          modelAutoMetaData
        }
      }
    }
    

    你终于可以做到这一点

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