双层子组件的自定义双向绑定点击事件，点击之后页面没有重新渲染
y***@zaichangcorp.com
- 发布：2024-01-12 16:00
- 更新：2024-01-12 16:00
- 阅读：81
产品分类： uniapp/小程序
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win11
第三方开发者工具版本号： 1.41.0
基础库版本号： 1.60.8
项目创建方式： CLI
CLI版本号： 3.0.0-alpha-3061020221121002
操作步骤：
预期结果：
页面重新渲染，更新active的css样式
页面重新渲染，更新active的css样式
实际结果：
active的css样式没有变化
active的css样式没有变化
bug描述：
孙组件
<template>
<view class="protocol_box" @click="agreeClick(!agree)">
<view class="label-item">
<view class="select" :class="{ active: agree }"></view>
我已阅读并同意</view
>
</view>
</template>
<script setup lang="ts">
const props = defineProps({
// 是否同意
agree: {
type: Boolean,
default: false,
},
});
const emits = defineEmits(['update:agree']);
// 是否同意勾选
const agreeClick = (selected: boolean) => {
emits('update:agree', selected);
};
</script>子组件
<template>
<protocol-box
v-model:agree="agree"
></protocol-box>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
const props = defineProps({
// 是否同意
modelValue: {
type: Boolean,
default: false,
},
});
const emits = defineEmits(['update:modelValue']);
const agree = computed({
get() {
return props.modelValue;
},
set(value) {
emits('update:modelValue', value);
},
});
</script>父组件
<template>
<pay-agreement
class="pay-agreement"
v-model="isAgree"
></pay-agreement>
</template>
<script setup lang="ts">
import { ref, PropType, watch } from 'vue';
const isAgree = ref(false);
</script>在这种情况下，快手小程序的ios端，点击agreeClick事件时，页面上的active样式没有更新。
0 个回复