1

我正在尝试使用vue 3和vue-class-component创建一个按钮生成系统，其中预期如下：（请注意，给定的按钮数量不是静态的，这意味着它可以是 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将主标签添加到相应的标签中，但这让我觉得更加复杂，因为我有一些其他元素在等待与按钮相同的处理，我可能会卡在某个地方再次走在路上。

4

1 回答 1

0

href在使用Vue.js 中的页面导航之前，我遇到了这个问题。

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

于 2021-02-16T23:20:58.523 回答