fix: 修复up-radio组件uni-app-x版本父子组件通信

ijry · Sep 11, 2024 · b0fd967 · b0fd967
1 parent 3357046
commit b0fd967
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 58 deletions.
diff --git a/src/uni_modules/uview-plus/components/up-badge/up-badge.uvue b/src/uni_modules/uview-plus/components/up-badge/up-badge.uvue
@@ -41,7 +41,7 @@
 		computed: {
 			// 是否将badge中心与父组件右上角重合
 			boxStyle(): any {
-				let style = {};
+				let style: UTSJSONObject = {};
 				return style;
 			},
 			// 整个组件的样式

diff --git a/src/uni_modules/uview-plus/components/up-radio-group/up-radio-group.uvue b/src/uni_modules/uview-plus/components/up-radio-group/up-radio-group.uvue
@@ -57,19 +57,19 @@
 		watch: {
 			// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
 			parentChangeData() {
-				// if (this.children.length) {
-				// 	this.children.map(child => {
-				// 		// 判断子组件(up-radio)如果有init方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
-				// 		if (typeof(child.init) === 'function') {
-				// 			child.init()
-				// 		}
-				// 	})
-				// }
+				//if (this?.children?.length != null && this?.children?.length > 0) {
+					this.children.map(child => {
+						// 判断子组件(up-radio)如果有init方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+						// if (typeof(child.init) === 'function') {
+						// 	child.init()
+						// }
+					})
+				//}
 			},
 		},
 		data() {
 			return {
-				children: [] as any[],
+				children: [] as Array<ComponentPublicInstance>
 			}
 		},
 		created() {
@@ -78,21 +78,30 @@
 		emits: ['update:modelValue', 'change'],
     	// #endif
 		methods: {
+			addChild(ins: ComponentPublicInstance): void {
+				let exist = false
+				this.children.map(child => {
+					if (ins == child) {
+						exist = true
+					}
+				})
+				if (exist == false) {
+					this.children.push(ins)
+				}
+			},
 			// 将其他的radio设置为未选中的状态
-			unCheckedOther(childInstance: any) {
+			unCheckedOther(childInstance: ComponentPublicInstance) {
 				this.children.map(child => {
 					// 所有子radio中，被操作组件实例的checked的值无需修改
 					if (childInstance !== child) {
-						// child['checked'] = false
+						child.$data['checked'] = false
 					}
 				})
-				// const {
-				// 	name
-				// } = childInstance
-				// // 通过emit事件，设置父组件通过v-model双向绑定的值
-    //             this.$emit("update:modelValue", name);
-				// // 发出事件
-				// this.$emit('change', name)
+				const name = childInstance.$props['name']
+				// 通过emit事件，设置父组件通过v-model双向绑定的值
+                this.$emit("update:modelValue", name);
+				// 发出事件
+				this.$emit('change', name)
 			},
 		}
 	}

diff --git a/src/uni_modules/uview-plus/components/up-radio/up-radio.uvue b/src/uni_modules/uview-plus/components/up-radio/up-radio.uvue
@@ -61,23 +61,6 @@
 	 * @event {Function} change 某个radio状态发生变化时触发(选中状态)
 	 * @example <up-radio :labelDisabled="false">门掩黄昏，无计留春住</up-radio>
 	 */
-	type parentDataType = {
-	  iconSize: string,
-	  labelColor: string,
-	  labelSize: string,
-	  labelDisabled: boolean,
-	  disabled: boolean,
-	  shape: string,
-	  activeColor: string,
-	  inactiveColor: string,
-	  size: string,
-	  value: any,
-	  modelValue: any,
-	  iconColor: string,
-	  placement: string,
-	  borderBottom: boolean,
-	  iconPlacement: string
-	}
 	export default {
 		name: "up-radio",
 		mixins: [mpMixin, mixin, propsRadio],
@@ -208,6 +191,7 @@
 				const style = {}
 				style['backgroundColor'] = this.checked && !this.elDisabled ? this.elActiveColor : '#ffffff'
 				style['borderColor'] = this.checked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor
+				// style['color'] = '#ffffff'
 				style['width'] = addUnit(this.elSize)
 				style['height'] = addUnit(this.elSize)
 				// 如果是图标在右边的话，移除它的右边距
@@ -239,7 +223,7 @@
 			init(): void {
 				// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
 				this.updateParentData()
-				if (this.parent == null) {
+				if (this.$parent == null) {
 					error('up-radio必须搭配up-radio-group组件使用')
 				}
 				// 设置初始化时，是否默认选中的状态
@@ -287,8 +271,8 @@
 				this.emitEvent()
 				// 将本组件标记为选中状态
 				this.checked = true
-				if (this.parent != null) {
-					// this.parent.unCheckedOther(this)
+				if (this.$parent != null) {
+					this.$parent!.$callMethod('unCheckedOther', this)
 				}
 			}
 		}
@@ -339,14 +323,14 @@
 			transition-property: border-color, background-color, color;
 			transition-duration: 0.2s;
 			/* #endif */
-			color: $up-content-color;
+			// color: $up-content-color;
 			@include flex;
 			align-items: center;
 			justify-content: center;
-			color: transparent;
-			text-align: center;
+			// color: transparent;
+			// text-align: center;
 			margin-right: $up-radio-wrap-margin-right;
-			font-size: $up-radio-wrap-font-size;
+			// font-size: $up-radio-wrap-font-size;
 			border-width: $up-radio-wrap-border-width;
 			border-color: $up-radio-wrap-border-color;
 			border-style: solid;

diff --git a/src/uni_modules/uview-plus/libs/mixin/mixin.uts b/src/uni_modules/uview-plus/libs/mixin/mixin.uts
@@ -29,7 +29,8 @@ export const mixin = defineMixin({
     data() {
         return {
             parent: null as ComponentPublicInstance|null,
-            parentData: {} as UTSJSONObject
+            parentData: {} as UTSJSONObject,
+			//children: null as ComponentPublicInstance[] | null
         }
     },
     onLoad() {
@@ -137,22 +138,23 @@ export const mixin = defineMixin({
             // 将父组件this中对应的参数，赋值给本组件(up-radio的this)的parentData对象中对应的属性
             // 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
             // 此处并不会自动更新子组件的数据，而是依赖父组件up-radio-group去监听data的变化，手动调用更新子组件的方法去重新获取
-            this.parent = this.getParent(parentName)
-            console.log('this.parent', this.parent)
-            // if (this.parent.$data?.['children'] != null) {
-            //     // 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
-            //     // if (this.parent.$data['children'].indexOf(this) === -1) {
-            //     //     this.parent.$data['children'].push(this)
-            //     // }
-            // }
-            if (this.parent != null) {
+            // this.parent = this.getParent(parentName)
+            // console.log('this.parent', this.parent)
+            if (this.$parent?.$data?.['children'] != null) {
+                // 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
+                //if (this.parent?.$data?.['children'].indexOf(this) === -1) {
+					console.log(this.$parent?.$data?.['children'])
+					this.$parent!.$callMethod('addChild', this)
+                //}
+            }
+            if (this.$parent != null) {
                 // 历遍parentData中的属性，将parent中的同名属性赋值给parentData
                 UTSJSONObject.keys(this.parentData).map((key: string) => {
-                    if (this.parent?.$props?.[key] != null) {
-                        this.parentData[key] = this.parent?.$props?.[key]
+                    if (this.$parent?.$props?.[key] != null) {
+                        this.parentData[key] = this.$parent?.$props?.[key]
                     }
-                    if (this.parent?.$data?.[key] != null) {
-                        this.parentData[key] = this.parent?.$data?.[key]
+                    if (this.$parent?.$data?.[key] != null) {
+                        this.parentData[key] = this.$parent?.$data?.[key]
                     }
                 })
             }

diff --git a/uni-app-x/pages/componentsA/radio/radio.uvue b/uni-app-x/pages/componentsA/radio/radio.uvue
@@ -1,4 +1,7 @@
-<template>
+<template>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex:1">
+	<!-- #endif -->
 	<view class="u-page">
 		<view class="u-demo-block">
 			<text class="u-demo-block__title">基本案例</text>
@@ -158,6 +161,9 @@
 			</view>
 		</view>
 	</view>
+	<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
 </template>
 
 <script>