[英]Access component data structure from parent object in Vue.js
I have main component with dynamicaly created components like this:我的主要组件具有动态创建的组件,如下所示:
<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' ],
And I need to pass data structure of imported components in v-on:click methods.我需要在v-on:click方法中传递导入组件的数据结构。 For example in line
例如在行
<button type="button" v-on:click="addFormElement('ModelAuto', id, ModelAuto.metaData)">Add ModelAuto</button>
I'd like to pass object with name metaData from data section of ModelAuto component.我想从 ModelAuto 组件的数据部分传递 object 名称为metaData 。
In ModelAuto component data section looks like:在 ModelAuto 组件数据部分看起来像:
export default {
name: "ModelAuto",
props: [ 'id', 'nodes', 'type' ],
data: function() {
return {
metaData: {
modelNum: 8
}
}
}
}
What is the right way to do this?这样做的正确方法是什么?
You're trying to get some data which belong to a component instance via the component "class".您正在尝试通过组件“类”获取一些属于组件实例的数据。 It's the same issue that accessing statically an instance property in PHP.
静态访问 PHP 中的实例属性是同样的问题。
To make it work, you may add a named export to your component file要使其工作,您可以将命名导出添加到组件文件
export const metaData = {
modelNum: 8
}
export default {
name: "ModelAuto",
props: [ 'id', 'nodes', 'type' ],
data: function() {
return {}
}
}
It allows you to import your component as usually by它允许您像往常一样通过以下方式导入组件
import ModelAuto from "@/components/elems/ModelAuto.vue";
But you can also do但你也可以这样做
import ModelAuto, { metaData as modelAutoMetaData } from "@/components/elems/ModelAuto.vue";
export default {
name: "Block",
props: [ 'id', 'nodes', 'type' ],
data () {
return {
modelAutoMetaData
}
}
}
You can finally do this你终于可以做到这一点
<button type="button" v-on:click="addFormElement('ModelAuto', id, modelAutoMetaData)">Add ModelAuto</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.