子组件中修改props值 （setup + ts + vue3） | emit(‘update:value‘,value) 使用方法

父子 prop 之间存在一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。因此子组件中不可以修改prop值，否则会报错，导致程序无法运行

小程序中控制台提醒如下：

 当前修改的key为只读属性

解决方法：

父组件：

<CheckAlone v-model:isCheck="isCheck"></CheckAlone>

<script lang="ts" setup>
	import { ref } from 'vue'
	const isCheck = ref(false)
</script>

注意：一定要加 v-model

注意：一定要加 v-model

注意：一定要加 v-model

子组件：

<template>
	<view class="check-alone" @click="onCheckChange">
         <!--这边绑定的是自己重新定义的isCheck-->
		<image class="check-icon" v-if="isCheck" src="./check.png" mode=""></image>
		<view class="check-circle" v-else></view>
	</view>
</template>

<script lang="ts" setup>
	import { ref ,Ref,watch} from 'vue'

    //定义emit
	const emit = defineEmits(['update:isCheck'])

    //定义prop
	type Props = {
		isCheck:boolean,
		size:number | string
	}
	const props = withDefaults(defineProps<Props>(),{
		isCheck:false,
		size:34
	})

    //重新定义一个值来接受prop
	const isCheck:Ref<boolean> = ref(false)

    //因为prop中的值非动态响应，所以需要通过watch监听，immediate 初始化时接收父组件中的传值
	watch(() => props.isCheck,() => {
		isCheck.value = props.isCheck;
	},{
		immediate:true
	})

    //点击事件触发时更新父组件的值
	const onCheckChange = () => {
		emit('update:isCheck',!isCheck.value)
	}
	
</script>

因为我怕命名混乱，所以父组件子组件中都使用的同一个命名 isCheck