Question

我目前正在构建一个用户定义的动态界面构建器（从JSON文档构建），并且我试图找出处理两件事的最佳方法。

例如，如果我有一个“文本”字段组件并以表格形式显示，则它需要一个标签，该标签由JSON文档中的字段设置定义。但是，如果我在表中显示相同的字段（用于具有编辑功能的列表），则标签将位于标题中，而不是每一行。

现在-可以将标签标记添加到每个单独的元素中，但是我想使其更加通用。因此，我有这种事情来定义在“容器”小部件（例如表格，表格等）内循环使用的组件：

Element.vue：

<template>
   <div class="element">
      <label v-if="settings.label && !settings.hidelabel">{{settings.label}}</label>
      <component :is="type" :settings="settings"></component>
   </div>
</template>

<script>
import UIElements from './ui';

export default {
   components:{...UIElements},
   props: ['type', 'settings']
}
</script>

TextElement.vue

<template>
   <input type="text" ...etc>
</template>

<script>
import UIElements from './ui';

export default {
   components:{...UIElements},
   props: [ 'settings' ]
}
</script>

在内部小部件中，我这样做：

<element type="TextElement" settings="..."></element>

现在：

如果TextElement在表单小部件内，除非另有说明，否则我将显示标签。
如果TextElement在列表小部件内，则标签被隐藏。
我不想在每个元素中放置“标签”标记，否则我想保持通用性。
某些类型的Element可能希望隐藏自己的标签-例如，SubmitButtonElement不会显示单独的标签，但是该标签将是按钮本身的一部分。

所以我认为以下是最好的：

根据标签的存在和'hidelabel'的设置，标签渲染在Element.vue内部是通用的。
如果该标签不相关，则小部件可以隐藏该标签，方法是将该设置传递给Element
如果不合适，元素也可以隐藏标签。

这是我坚持的最后一点。谁能给我任何指向实现此目标的最佳方法的提示？

从组件更改父级属性

0 个答案: