vue两个子组件怎么通信（vue3 子组件上绑定(v-model=“xx“) 父组件传过来的值后报错）

遇到的问题

vue3的项目中, 升级了vant的版本(^4.0.7)后, 子组件中用v-model的地方出现了报错

报错的内容

v-model cannot be used on a prop, because local prop bindings are not writable.

Use a v-bind binding combined with a v-on listener that emits update:x event instead.

解决问题

在阅读vue3的文档中看到了这么一段话

单向数据流

所有的 props 都遵循着单向绑定原则
  
  
  
  
  
 ，props 因父组件的更新而变化 
  
  
  
  
  ，自然地将新的状态向下流往子组件 


 


 


 


 


 

，而不会逆向传递
  
  
  
  
  
 。这避免了子组件意外修改父组件的状态的情况
 
 
 
 
 
，不然应用的数据流将很容易变得混乱而难以理解 
  
  
  
  
  。

另外  
   
   
   
   
   ，每次父组件更新后 

 

 

 

 

 
，所有的子组件中的 props 都会被更新到最新值

 

 

 

 

 

，这意味着你不应该在子组件中去更改一个 prop 


 


 


 


 


 

。若你这么做了           ，Vue 会在控制台上向你抛出警告：

最后声明了局部属性后 上边的报错消失

prop 被用于传入初始值；而子组件想在之后将其作为一个局部数据属性
 
 
 
 
 
。在这种情况下 
 

 
 

 
 

 
 

 
 

 
 ，最好是新定义一个局部数据属性











，从 props 上获取初始值即可

局部属性定义在了watch里

 => props.isSortPopup, (newVal, oldVal) => { a.value = props.sortArr; }) isSortPopup 是一个状态, 发现直接监听父组件值的话 并不是每次都触发, 所以在关闭, 打开的加了一个标识 这样每次就可以监听到数据的变化

附章节链接, 仅供参考, 如有错误, 欢迎指出, 随时交流

https://cn.vuejs.org/guide/components/props.html#one-way-data-flow

文档上的内容其实并没有看太明白

不知道怎么去computed

为什么会定义在watch里呢

发现直接去a.value = props.sortArr 的话 得到的是一个初始值, 也就是父组件在声明sortArr的最初状态

const sortArr = ref([]);