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

由 发布于 javascriptvue.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>
点赞
评论