diff --git a/src/checkbox/Checker.tsx b/src/checkbox/Checker.tsx
index cf47bc48e..c3b4f6b4c 100644
--- a/src/checkbox/Checker.tsx
+++ b/src/checkbox/Checker.tsx
@@ -33,17 +33,21 @@ export default defineComponent({
setup(props, { emit, slots }) {
const iconRef = ref();
+ const getParentProp = (name: string) => {
+ if (props.parent) {
+ return props.parent.props[name];
+ }
+ return null;
+ };
+
const disabled = computed(
- () => (props.parent && props.parent.disabled) || props.disabled
+ () => getParentProp('disabled') || props.disabled
);
- const direction = computed(
- () => (props.parent && props.parent.direction) || null
- );
+ const direction = computed(() => getParentProp('direction') || null);
const iconStyle = computed(() => {
- const checkedColor =
- props.checkedColor || (props.parent && props.parent.checkedColor);
+ const checkedColor = props.checkedColor || getParentProp('checkedColor');
if (checkedColor && props.checked && !disabled.value) {
return {
@@ -72,8 +76,8 @@ export default defineComponent({
};
const renderIcon = () => {
- const { bem, shape, parent, checked } = props;
- const iconSize = props.iconSize || (parent && parent.iconSize);
+ const { bem, shape, checked } = props;
+ const iconSize = props.iconSize || getParentProp('iconSize');
return (
- {this.$slots.default?.()}
+ watch(
+ () => props.modelValue,
+ (value) => {
+ emit('change', value);
+ }
+ );
+
+ linkChildren({ emit, props });
+ useParentField(() => props.modelValue);
+
+ return () => (
+
+ {slots.default?.()}
);
},
diff --git a/src/radio/index.js b/src/radio/index.js
index 543f79326..43e6c8273 100644
--- a/src/radio/index.js
+++ b/src/radio/index.js
@@ -1,48 +1,37 @@
import { pick, createNamespace } from '../utils';
-import { ChildrenMixin } from '../mixins/relation';
+import { useParent } from '../composition/use-relation';
import Checker, { checkerProps } from '../checkbox/Checker';
+import { RADIO_KEY } from '../radio-group';
const [createComponent, bem] = createNamespace('radio');
export default createComponent({
- mixins: [ChildrenMixin('vanRadio')],
-
props: checkerProps,
emits: ['update:modelValue'],
- computed: {
- currentValue: {
- get() {
- return this.parent ? this.parent.modelValue : this.modelValue;
- },
+ setup(props, { emit, slots }) {
+ const { parent } = useParent(RADIO_KEY);
- set(val) {
- (this.parent || this).$emit('update:modelValue', val);
- },
- },
+ const checked = () => {
+ const value = parent ? parent.props.modelValue : props.modelValue;
+ return value === props.name;
+ };
- checked() {
- return this.currentValue === this.name;
- },
- },
+ const toggle = () => {
+ const emitter = parent ? parent.emit : emit;
+ emitter('update:modelValue', props.name);
+ };
- methods: {
- toggle() {
- this.currentValue = this.name;
- },
- },
-
- render() {
- return (
+ return () => (
);
},