Vue.js - 父级基于无渲染子数据生成组件

Posted 2023-02-22

【中文标题】Vue.js - 父级基于无渲染子数据生成组件

【英文标题】：Vue.js - Parent generate component based on renderless child data

【发布时间】：2021-05-19 20:16:36

【问题描述】：

我正在尝试使用 vue 3 和 vue-class-component 创建一个按钮生成系统，期望如下：（注意按钮的数量given 不是静态的，这意味着它可以是 1 个或多个）

输入

<ButtonGroup id="bg1">
    <Button text="button1" url="./location1" />
    <Button text="button2" url="./location2" />
    ...
</ButtonGroup>

这里Button 是无渲染的，ButtonGroup 首先获取其所有子数据以进行预处理，例如设置主按钮，然后再渲染整个 shebang，结果如下：

输出

<div id="bg1" class="button-group">
    <a href="./location1" class="button primary">button1</a> 
    <a href="./location2" class="button">button2</a> 
    ...
</div>

Button 和 ButtonGroup 类的代码如下所示

// File Button.vue
@Options()
export default class Button extends Vue 
    @Prop() text!: string | undefined
    @Prop(default:"") url!: string


// File ButtonGroup.vue
@Options()
export default class ButtonGroup extends Vue  // This is the rendering class
    @Prop() id: string | undefined
    buttons: Array<Button> = [] // Contains buttons so it can be dynamically rendered

    beforeCreated() // Or created or so. 
        ...
    

现在我完全意识到，在 Vue 3 中实现这一点，访问子级变得相当困难，但这是我认为最简单的选择。我该如何让它发挥作用？

另一种选择是Button 将创建<a> 标签，然后ButtonGroup 将主标签添加到相应的标签中，但这让我觉得更加复杂，因为我还有一些其他类似的元素在等待与按钮相同的处理方式，我可能会再次卡在路上的某个地方。

【问题讨论】：

你熟悉 Vue 中的render function API 吗？这可能是您需要使用的。

我看过了，但这会渲染 Button 组件，除了此刻它甚至拒绝在 ButtonGroup 容器内渲染之外，这意味着它不是无渲染

【参考方案1】：

我之前在 Vue 中使用 href 浏览页面时遇到过这个问题。

我建议您将<a href="./location1"/> 更改为<router-link to="./location1"/>

【讨论】：

会的，谢谢！但是它并不能解决手头的问题。