子组件中修改props值 (setup + ts + vue3) | emit(‘update:value‘,value) 使用方法
父级 prop 的更新会向下流动到子组件中,但是反过来则不行。因此子组件中不可以修改prop值,否则会报错,导致程序无法运行。因为我怕命名混乱,所以父组件子组件中都使用的同一个命名 isCheck。父子 prop 之间存在一个。当前修改的key为只读属性。
文章共479字 · 阅读需要大约2分钟
一键AI生成摘要,助你高效阅读
问答
·
父子 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
更多推荐
已为社区贡献1条内容
所有评论(0)