父子 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

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐