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 都将会刷新为最新的值。
这意味着你不应该在一个子组件内部改变 prop。
如果你这样做了，Vue 会在浏览器的控制台中发出警告。
如果你这样做了，Vue 会在浏览器的控制台中发出警告。
子组件想修改 prop 时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。
有两种常见的试图改变一个 prop 的情形 :
1、这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。
解决
在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值
2、这个 prop 以一种原始的值传入且需要进行转换。
解决
在这种情况下，最好使用这个 prop 的值来定义一个计算属性
0 条评论
下一页
