在Vue中实现递归组件这么简单·recursively·主要就是三步定义组件、使用组件和管理状态
作者：机器人技术佬 |
发布时间：2025-06-20 |
在Vue中实现递归组件的单选功能，这么简单！
递归组件的单选功能，听起来挺高大上的，其实用起来挺简单的。主要就是三步：定义组件、使用组件和管理状态。跟着我，一步步来。
一、定义递归组件
首先，我们要创建一个递归组件，这个组件会像树一样自己套自己。比如这样：
```html
{{ label }}
```
这里，`recursively` 就是我们的递归组件名，它接收一个 `children` 属性来决定是否继续递归。
二、使用递归组件
然后在父组件里使用这个递归组件，就像这样：
```html
```
这里的 `options` 是你想要显示的选项数组。
三、管理选中状态
为了让整个树里只有一个选项被选中，我们需要管理好这个状态。我们可以在父组件里用一个变量来存储当前的选中值，并传递给递归组件。
```javascript
data() {
return {
selected: null
};
}
```
然后在递归组件里，我们通过 `v-model` 来绑定这个状态，并通过事件更新它。
```html
```
这样，每当你点击一个单选框时，`selected` 会被更新，同时也会通过事件通知父组件。
```javascript
methods: {
updateSelected() {
this.$emit('update:selected', this.selected);
}
}
```
实例说明
来个简单的例子吧：
```html
```
```javascript
data() {
return {
options: [
{ label: '选项1', value: '1', children: [{ label: '子选项1-1', value: '1-1' }, { label: '子选项1-2', value: '1-2' }] },
{ label: '选项2', value: '2', children: [{ label: '子选项2-1', value: '2-1' }] }
]
};
}
```
在这个例子中，当你点击任何一个单选框时，只有一个会被选中，而且子选项也会跟着变化。
就这样，你就可以在Vue中实现递归组件的单选功能啦！简单吧？如果还有其他问题，随时问我哦！