從 Vue.js 中的父 object 訪問組件數據結構

Question

我的主要組件具有動態創建的組件，如下所示：

<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 組件的數據部分傳遞 object 名稱為metaData 。

在 ModelAuto 組件數據部分看起來像：

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

這樣做的正確方法是什么？

Answer 1

您正在嘗試通過組件“類”獲取一些屬於組件實例的數據。 靜態訪問 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>