Vue3中修改父组件传递到子组件中的值
自定义组件上使用v-model
父组件：
//此处是父组件中引入的子组件
<ChildrenView v-model:num="num"/>
//定义数据
let num=ref(10);//定义num为10,传递给子组件
子组件:
<script setup>
//子组件接收父组件传递过来的数据
let props=defineProps({
num:number;
});
console.log(props.num)//接收过来的数据num=10
//重点:开始修改子组件传递过来的num
//1.引入我们的 **emit("自定义事件名",传递的数据)** 函数，用来触发自定义事件
//2.使用emit()
let emit=defineEmits(["update:num"]);//自定义的更新num事件
//3.假设子组件里的有个按钮，执行的是这个changeNum事件
let changeNum=()=>{
emit("update:num",100);//触发自定义事件，将父组件的num修改为100
}
</script>
总结：
使用步骤如下:
1.父组件中的子组件绑定自定义属性num
2.子组件接收props的num
3.子组件定义emit事件,事件名为update:值 —defineEmits([“update:num”])
4.执行emit() ----emit(“自定义事件update:num”,子传父的值)
//此处的"值"要和v-model:值 保持一致,即:v-model:num emit("update:num")
let emit=defineEmits(["update:值"])
emit("update:值",子传父的数据),执行即修改了父组件传递过来的值
