Vue3中如何修改父组件传递到子组件中的值(全网少有!)
更新时间：2023年04月15日 11:53:37 作者：喝西瓜汁的兔叽Yan
大家都知道,vue是具有单向数据流的传递特性,下面这篇文章主要给大家介绍了关于Vue3中如何修改父组件传递到子组件中值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
Vue3中修改父组件传递到子组件中的值
1.大家都知道，vue是具有单向数据流的传递特性。当你在子组件中修改父组件传递过来的数据的时候，控制台就会报出错误，说不让你对父组件传递的值进行修改。
2.那么，尤大大为了解决这个问题，在vue3的时候给我们提供了一个新的思路:v-model来实现父传子，并且子也可以修改父组件传递过来的数据。
3. 都读到这里了，我给大家提供两个修改父组件数据的思路（不仅限于vue3）:
法一：使用v-model进行父传子，并且子组件修改父组件传递的值。
法二：使用Pinia或者vuex进行状态管理，然后进行数据的修改。
自定义组件上使用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.大家肯定有疑惑，这个emit()不就是子传父的时候用的吗，那么父组件上不应该去绑定这个update:num吗？如下:父组件:<ChildrenView v-model:num="num" @update:num="changeNum" >
是的，确实是子传父用的，但是你没必要再去绑定@update:num了。
why?
因为尤大大在自定义组件上使用v-model自己已经做过了处理，所以你只需要emit(“定义update:值”,数据)即可修改父组件的值了
总结：
使用步骤如下:
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:值",子传父的数据),执行即修改了父组件传递过来的值
到此这篇关于Vue3中如何修改父组件传递到子组件中值的文章就介绍到这了,更多相关Vue3修改父组件传递到子组件的值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在处理文本数据的时候,我们经常会需要把文本数据的行与列进行转换操作，这样更方便查看，本文就详细的介绍了vue3+el-table实现行列转换，感兴趣的可以了解一下2021-06-06
这篇文章主要给大家介绍了关于如何基于Vue-cli快速搭建项目的完整步骤，文中通过示例代码以及图片将搭建的步骤一步步介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要介绍了基于cropper.js封装vue实现在线图片裁剪组件功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-03-03
这篇文章主要给大家介绍了关于Vue动态样式几种常用方法总结的相关资料,在我们的前端界面中,很多的地方的样式都是不确定的状态,要根据其他内容的变化而变化样式的,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了spring-cloud-stream的手动消息确认问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
在开发Vue应用时,我们经常需要在多个组件中复用一些通用的函数或方法,这些函数可能是我们自己编写的工具函数,也可能是从第三方库中导入的,下面我们就来看看如何正确引用和使用外部方法吧2024-01-01
这篇文章主要介绍了VUE如何将方法名字作为变量进行调用问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了vue项目中路由懒加载的三种方式,主要包括vue异步组件,组件懒加载,webpack的require.ensure(),具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了三种使用icon的方案，分别是element-icon、svg-icon、@iconify/vue，三种方案通过代码示例介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue中的文本空格占位符说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
最新评论