16、VUE中的单向数据流
2022-04-01 12:40:48 0 举报AI智能生成
vue
作者其他创作
大纲/内容
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
父组件可以基于属性把信息传递给子组件 但是反过来 子组件无法基于属性把信息传递给父组件
<vote-main :supnum=\"supNum\" :oppnum=\"oppNum\"></vote-main>
例如
通俗解释
父组件中可以调用子组件
子组件不能调用父组件（会造成死循环）
只有调取组件的时候 才能基于属性传递
原因
定义
深度优先原则
Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
加载渲染过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
子组件更新过程
父 beforeUpdate -> 父 updated
父组件更新过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
销毁过程
图解
钩子函数顺序
这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。
子组件想修改 prop 时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。
1、这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。
在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值
解决
2、这个 prop 以一种原始的值传入且需要进行转换。
在这种情况下，最好使用这个 prop 的值来定义一个计算属性
有两种常见的试图改变一个 prop 的情形 :
注意
VUE 中的单向数据流
0 条评论
回复 删除
下一页
