vue 之 .sync

it2024-07-15  49

vue 之 .sync

官方解释:在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件都没有明显的变更来源。(but,至今这一段我还是不是很理解,有好心人路过可以当个热心市民~)

目前个人理解:

不加 .sync 时props传值 父组件: /* html */ <div :name='name' @setName='setName'></div> /* js */ <script> export default { data() { return { name: '何小花’ } }, methods: { setName(val) { this.name = val } } }

子组件:

/* html */ <div>{{name}}</div> /* js */ <script> export default { props: { name { type: String, default: '' } }, methods: { changeName() { this.$emit('setName', '何大花') } } } 加 .sync 时props传值 父组件: /* html */ <div :name.sync='name'></div> /* js */ <script> export default { data() { return { name: '何小花’ } } }

子组件:

/* html */ <div>{{name}}</div> /* js */ <script> export default { props: { name { type: String, default: '' } }, methods: { changeName() { this.$emit('update:setName', '何大花') } } }
最新回复(0)