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指令来创建自定义输入组件