VUE组件3 数据流和.sync修饰符

单向数据流:数据通过prop从父组件传递到子组件中,当父级组件中的数据更新时,传子组件也会更新,但不能在子组件中修改。防止子组件在无意中修改,改变父级组件状态

然而,双向数据绑定在某些情况下有用。如果想要使用双向数据绑定,可以使用一个修饰符来实现:.sync修饰符。这只是一个语法糖

例:<count-from-number :number.sync = "test"/>  等效于 <count-from-number :number = "test" @update:number"val => numberToD = val />

所以要改变父级组件的值,需要触发update:number事件,示例中的number ---是将要更新的值的名称

如果只想更新prop传过来的值而不关心父级组件的值更新,可以在一开始通过this引用prop的值,将它复制到data中。需要注意的是,如果prop的值更新了,组件内部并不会更新,如果想要更新可以添加一个监听器,来重新赋值。

与.sync相似可以在组件上使用v-model指令来创建自定义输入组件

posted @ 2019-11-27 23:01  四海潮生  阅读(2533)  评论(0编辑  收藏  举报