vue 子组件修改父组件props（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吗？

如下:父组件:

是的
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，确实是子传父用的
























，但是你没必要再去绑定@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:值",子传父的数据),执行即修改了父组件传递过来的值