一 .sync修饰符代码示例
子组件想要更新父组件的title,用$emit触发事件
$emit('update:title', newTitle)
父组件可以监听对应事件,并从$event中获取参数,同时可以根据需要更新一个本地的数据 property
<text-document
:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
二 .sync修饰符
一般而言子组件不能修改props外部数据,当组件希望改变了一个 props 的值时,这个变化需要通过$emit
触发事件通知父组件,同时父组件通过$event
来获取$emit
的参数。
:title="doc.title"
v-on:update:title="doc.title = $event"
由于上述场景很常见,可以使用.sync语法糖代替上述写法
:title.sync="doc.title"
三 其他修饰符
@click.stop="add"//表示阻止事件冒泡
@click.prevent="add"//表示阻止默认动作
@click.stop.prevent="add"//同时表示两种意思
@keypress.enter="fn"//点击enter键