vue中使用v-model完成组件间的通信

前端  /  管理员 发布于 4年前   355

以上的两种方法，都是实现的单向数组传递，那如何实现两个组件之间的双向传递呢？

即，在父组件中修改了值，子组件会立即更新。

在子组件中修改了值，父组件中立即更新。

vue中有一个很神奇的东西叫v-model，它可以完成我们的需求。

使用v-model过程中，父组件我们还是需要将子组件正常引入，只是传值方式改成了v-model

父组件

子组件

在这里，报了一个错误，这是因为数据流是单向的，但是我们在这里，子组件不应该直接修改props里的值。

 

这里不能直接修改，所以我们需要迂回着修改，在子组件中定义一个自己的变量，再将props的值赋值到自己的变量，修改自己的变量是可以的。

子组件 - 修改props中的值