我的主要组件具有动态创建的组件,如下所示:
<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
}
}
}
}
什么是正确的方法?
您正在尝试通过组件“类”获取一些属于组件实例的数据。与静态访问PHP中的实例属性是相同的问题。
要使其工作,您可以将命名导出添加到您的组件文件中
它允许您像通常那样导入组件
但是你也可以
你终于可以做到这一点