怀孕7个月胎儿图,人才重要性,魔铃网
组件接受的选项大部分与vue实例一样,而选项props是组件中非常重要的一个选项。在 vue 中,父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。接下来通过本文给大家介绍vue中props,一起看看吧!
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。
额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,vue 会在浏览器的控制台中发出警告。
问题
下面简要说一下上面发生的警告现象,或许大多数人都遇到过.
使用场景
父组件
<backlogmodal :ismodalopen="ismodalopen" @closemodal="handleclosemodal"> </backlogmodal>
子组件
// 使用了typescript export default class backlogmodal extends vue { @prop() private ismodalopen: boolean; private handleconfirm(): void { this.$message.info('clicked ok'); this.$emit('closemodal'); } private handleclose(): void { this.$message.info('clicked cancal'); this.$emit('closemodal'); } }
解决问题
export default class backlogmodal extends vue { private isopen: boolean = false; @prop() private ismodalopen: boolean; @watch('ismodalopen') private watchmodalopen(newval: boolean, oldval: boolean) { console.log(newval, oldval); if (newval !== oldval) { this.isopen = newval; } } private handleconfirm(): void { this.$message.info('clicked ok'); this.$emit('closemodal'); } private handleclose(): void { this.$message.info('clicked cancal'); this.$emit('closemodal'); } }
以上所述是小编给大家介绍的vue中的props(不可变状态),希望对大家有所帮助
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论