vue3 子组件获取父组件radio值
时间: 2023-11-21 10:05:51 浏览: 173
在 Vue3 中,子组件可以通过 `inject` 和 `provide` 来获取父组件的数据。具体实现步骤如下:
1. 在父组件中,使用 `provide` 提供数据,例如:
```
<template>
<div>
<label>
<input type="radio" v-model="selected" value="option1">
Option 1
</label>
<label>
<input type="radio" v-model="selected" value="option2">
Option 2
</label>
<ChildComponent />
</div>
</template>
<script>
import { provide, ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
setup() {
const selected = ref('option1')
provide('selected', selected)
return {
selected
}
}
}
</script>
```
2. 在子组件中,使用 `inject` 获取数据,例如:
```
<template>
<div>
Selected: {{ selected }}
</div>
</template>
<script>
import { inject } from 'vue'
export default {
setup() {
const selected = inject('selected')
return {
selected
}
}
}
</script>
```
这样,子组件就可以获取到父组件中选中的 radio 值了。
阅读全文