怎么理解 Vue 的单向数据流?

1. Vue 的单向数据流:指数据一般从父组件传到子组件,子组件没有权利直接修改父组件传来的数据,即子组件从 props 中直接获取的数据,只能请求父组件修改数据再传给子组件。父级属性值的更新会下行流动到子组件中。

2. 为什么不能子组件直接修改父组件传来的值呢?父组件的值可能会不断发生变化,那么如果我们子组件对父组件传来的值比如说 props 有一个 number,子组件收到了 number=1,在收到后,子组件直接改变number 的值为 5,去做些事情,但还未做时父组件数据更新了,传过来一个值 3,也就是说子组件刚将其变为 5,父组件又把它变成了 3,可能影响子组件的使用。说的官方一些,就是父组件的值更新时,子组件中 props 的值也会发生更新。

3. 在子组件中直接用 v-model 绑定父组件传过来的数据是不合理的,如果希望修改父组件传给子组件的值:

(1)在子组件 data 中创建一个变量获取 props 中的值,再改变这个 data 中的值。

(2)子组件使用 $emit 发出一个事件,让父组件接收去修改这个值。

posted @ 2022-03-29 15:40  喜葵  阅读(825)  评论(0编辑  收藏  举报