写代码啦
.sync 修饰符
回复数(0) 浏览数(18)
{{topic.upvote_count || 0}} 编辑 回复

在某些场景下我们需要通过子组件对父组件的数据进行修改,但是vue不建议我们使用子组件直接修改父组件的数据,虽然可以通过父组件提供一个修改数据的函数让子组件调用来到达目的,但是vue提供了另一种方式让我们修改数据
在父组件中接受子组件传递的值,对指定的属性进行修改

<demoTemplate :message="n" @update:message="val => n = val" />

在子组件中传递要修改的属性和属性值

<button @click="$emit('update:message',message+1)">+1</button>

而.sync修饰符就是第一行代码的语法糖

<demoTemplate :message.sync="n" />

vue会将有.sync的属性进行扩展

attribute.sync="value"     =>   attribute="value" @update:attribute="val => value = val "
{{topic.upvote_count || 0}}

在某些场景下我们需要通过子组件对父组件的数据进行修改,但是vue不建议我们使用子组件直接修改父组件的数据,虽然可以通过父组件提供一个修改数据的函数让子组件调用来到达目的,但是vue提供了另一种方式让我们修改数据
在父组件中接受子组件传递的值,对指定的属性进行修改

<demoTemplate :message="n" @update:message="val => n = val" />

在子组件中传递要修改的属性和属性值

<button @click="$emit('update:message',message+1)">+1</button>

而.sync修饰符就是第一行代码的语法糖

<demoTemplate :message.sync="n" />

vue会将有.sync的属性进行扩展

attribute.sync="value"     =>   attribute="value" @update:attribute="val => value = val "
18
回复 编辑